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

问题描述

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

从vue"导入Vue；从./App.vue"导入应用程序；从./router/routes"导入路由器；从./store/root"导入商店；从./plugins/vuetify"导入 vuetify；从./constants"导入 { RootActions };从axios"导入 axios；axios.get("https://api.github.com/users/mzabriskie").then(function(response) {console.log({ headers: response.headers });});

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

但是在

问题:

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

参考:

• https://github.com/axios/axios/issues/606
• https://github.com/axios/axios/issues/771
• Axios 可以访问响应头字段

解决方案

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

I have simple vuejs application. In the main.js I have something like:

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 });
});

In the chrome console log I got these:

However in https://runkit.com/greenlaw110/5e92363de9be35001ab0481e with exactly the same code, I have much more headers printed out:

Question:

1. Why there is such a big difference between axios running in vuejs and a pure nodejs environment?
2. What I really want is to get the Authorization header of the response in my VueJs application, is this really doable in any way? (Note I have already put Authorization in the Access-Control-Expose-Headers of the response to preflight request

Refer:

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

解决方案

All right, so here is the problem, the Access-Control-Expose-Headers must also be presented in the headers of response to non prefight reqeust. After I exposed this headers to all response, I can get access to the Authorization header in my vuejs app.

这篇关于在 vuejs 应用程序中运行时 axios 响应头丢失数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！