在 vuejs 应用程序中运行时，axios 响应 headers 缺少数据

Question

我有一个简单的 vuejs 应用程序。在 main.js 我有类似的东西：

import Vue from "vue";
import App from "./App.vue";
import router from "./router/routes";
import store from "./store/root";
import vuetify from "./plugins/vuetify";
import { RootActions } from "./constants";
import axios from "axios";

axios.get("https://api.github.com/users/mzabriskie").then(function(response) {
  console.log({ headers: response.headers });
});

在 chrome 控制台日志中，我得到了这些：

但是在 https://runkit.com/greenlaw110/5e92363de9be35001ab0481e 中使用完全相同的代码，我打印出更多 headers:

问题：

为什么vuejs中的axios运行和纯nodejs环境下的差别这么大？
我真正想要的是在我的 VueJs 应用程序中获得响应的 Authorization header，这真的可行吗？（请注意，我已经将 Authorization 放入了对预检请求

Access-Control-Expose-Headers

参考：

Answer 1

好吧，问题来了，Access-Control-Expose-Headers也必须出现在响应非prefight reqeust的headers中。在我将此 header 暴露给所有响应后，我可以访问我的 vuejs 应用程序中的 Authorization header。

Answer 2

在您的应用程序中，您需要启用 Access-Control-Expose-Headers

例子

nestjs 后端应用程序

app.enableCors({
    exposedHeaders: 'session-id'
  });

现在您的客户端应用程序将能够访问该响应header

Answer 3

对于CORS请求，浏览器默认只能访问几个响应header，分别是：Cache-Control、Content-Language、Content-Length、Content-Type、过期、Last-Modified、编译指示

所有 header 都将显示在浏览器中，但客户端代码将无法访问这些 header。

如果您希望您的客户端代码能够访问其他 headers （示例：Token），那么我们需要设置 Access-Control-Expose-Headers header在服务器上，如下图

Access-Control-Expose-Headers: Token

在浏览器中 API 响应将显示我们需要的所有 header

但是代码将无法访问 headers。

设置前暴露headers

在服务器上设置公开 headers 后。 headers 将在浏览器中显示相同，但另外 browser/client 代码将能够访问 headers(Token)

此答案基于Nick Uraltsev at https://whosebug.com/a/37931084/4337125

提供的答案

在 vuejs 应用程序中运行时，axios 响应 headers 缺少数据

axios response headers missing data when running in vuejs app

authorization

http-headers

vue.js

axios

vuejs2

在 vuejs 应用程序中 运行 时，axios 响应 headers 缺少数据

axios response headers missing data when running in vuejs app

authorization

http-headers

vue.js

axios

vuejs2

在 vuejs 应用程序中运行时，axios 响应 headers 缺少数据