vuejs 앱에서 실행할 때 Axios 응답 헤더에 데이터가 누락됨

vuejs 앱에서 실행할 때 Axios 응답 헤더에 데이터가 누락됨

간단한 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 });
});

크롬 콘솔 로그에는 다음과 같은 정보가 있습니다.

그러나 정확히 동일한 코드를 가진 https://runkit.com/greenlaw110/5e92363de9be35001ab0481e에서는 훨씬 더 많은 헤더가 인쇄되어 있습니다.

질문:.

1. vuejs 환경에서 실행되는 Axi와 순수 nodejs 환경에서 실행되는 Axi 사이에 큰 차이가 있는 이유는 무엇입니까?
2. 내가 정말 원하는 건 이 모든 걸AuthorizationVueJs 어플리케이션의 응답 헤더입니다.이게 정말 어떤 식으로든 가능합니까? (이미 입력했습니다)Authorization에서Access-Control-Expose-Headers비행 전 요청에 대한 응답의

참조:

• https://github.com/axios/axios/issues/606
• https://github.com/axios/axios/issues/771
• Axios는 응답 헤더 필드에 액세스합니다.

좋아요, 그럼 문제는요,Access-Control-Expose-Headers또한 사전 요구 사항에 대한 응답 헤더에도 제시해야 합니다.이 헤더를 모든 응답에 공개하면Authorizationvuejs 앱에 헤더가 있습니다.

cors 아래의 앱에서Access-Control-Expose-Headers

예

nestjs 백엔드 앱

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

이제 클라이언트 앱이 응답 헤더에 액세스할 수 있습니다.

CORS 요청의 경우 브라우저는 기본적으로 캐시 제어, 콘텐츠 언어, 콘텐츠 길이, 콘텐츠 유형, 만료, 최종 수정, 플러그마 등 일부 응답 헤더에만 액세스할 수 있습니다.

브라우저에 모든 헤더가 표시되지만 클라이언트 코드가 이러한 헤더에 액세스할 수 없습니다.

클라이언트 코드가 다른 헤더에 액세스 할 수 있도록 하는 경우(예: Token)을 설정해 주세요.Access-Control-Expose-Headers다음과 같이 서버상의 헤더

Access-Control-Expose-Headers: Token

브라우저 API 응답에 필요한 모든 헤더가 표시됩니다.

하지만 암호는 헤더에 접근할 수 없습니다.

노출된 헤더를 설정하기 전에

서버에 노출된 헤더를 설정한 후.헤더는 브라우저에 동일하게 표시되지만 브라우저/클라이언트 코드도 헤더에 액세스할 수 있습니다(토큰).

이 답변은 https://stackoverflow.com/a/37931084/4337125에서 Nick Uraltsev가 제공한 답변을 기반으로 합니다.

언급URL : https://stackoverflow.com/questions/61164197/axios-response-headers-missing-data-when-running-in-vuejs-app