在 vuejs 应用程序中运行时 axios 响应标头丢失数据

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

问题：

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

参考：

• https://github.com/axios/axios/issues/606
• https://github.com/axios/axios/issues/771
• axios获取响应头字段的访问权限

Answer 1

对于 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在/sf/answers/2655175911/提供的答案

Answer 2

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