在 vuejs 应用程序中运行时，axios 响应标头缺少数据答案

【问题标题】：axios response headers missing data when running in vuejs app在 vuejs 应用程序中运行时，axios 响应标头缺少数据
【发布时间】：2020-07-24 14:43:33
【问题描述】：

我有一个简单的 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 中使用完全相同的代码，我打印出更多的标题：

问题：

为什么运行在 vuejs 和纯 nodejs 环境下的 axios 会有这么大的区别？
我真正想要的是在我的 VueJs 应用程序中获得响应的 Authorization 标头，这真的可行吗？（注意我已经把Authorization放在了预检请求响应的Access-Control-Expose-Headers中

参考：

【问题讨论】：

标签： vue.js vuejs2 http-headers axios authorization

【解决方案1】：

好吧，问题来了，Access-Control-Expose-Headers 也必须出现在对非预检请求的响应头中。在我将此标头暴露给所有响应后，我可以在我的 vuejs 应用程序中访问 Authorization 标头。

【讨论】：

【解决方案2】：

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

例子

nestjs 后端应用

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

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

【讨论】：

【解决方案3】：

对于CORS请求，浏览器默认只能访问几个响应头，分别是：Cache-Control、Content-Language、Content-Length、Content-Type、Expires、Last-Modified、Pragma

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

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

Access-Control-Expose-Headers: Token

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

但代码将无法访问标头。

设置公开标题之前

在服务器上设置公开的标头后。 标头将在浏览器中显示相同，但此外浏览器/客户端代码将能够访问标头（令牌）

此答案基于Nick Uraltsev https://stackoverflow.com/a/37931084/4337125提供的答案

【讨论】：