当在Vue.js应用中运行时，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. 为什么axios在vuejs和纯nodejs环境中运行存在如此大的差异？
2. 我真正想要的是在我的VueJs应用程序中获取响应的Authorization头，这真的可以通过任何方式实现吗？（注意，我已经将Authorization放入响应的Access-Control-Expose-Headers中以进行预检请求）

参考：

• https://github.com/axios/axios/issues/606
• https://github.com/axios/axios/issues/771
• Axios get access to response header fields

- Gelin Luo

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响应中，将显示我们需要的所有头 但是代码将无法访问这些头。 在设置公开头之前

在服务器上设置暴露的标头后。 浏览器中的标头将显示相同，但是浏览器/客户端代码还可以访问标头(Token)

本答案基于Nick Uraltsev在https://dev59.com/2loU5IYBdhLWcg3wCjrx#37931084提供的答案。

- Rajeshwar

Answer 2

好的，这里有一个问题：必须在非预检请求的响应头中也呈现Access-Control-Expose-Headers。当我将该头部公开到所有响应时，我可以在我的vuejs应用程序中访问Authorization头部。

- Gelin Luo

Answer 3

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

示例

Nestjs后端应用程序

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

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

- nemanja-mudrinic