axios response headers missing data when running in vuejs app

问题

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

回答1:

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.

回答2:

At your app under cors ou need to enable Access-Control-Expose-Headers

example

nestjs backend app

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

Now your client app will be able to access that response header

来源：https://stackoverflow.com/questions/61164197/axios-response-headers-missing-data-when-running-in-vuejs-app