Axios 인터셉터 토큰 헤더가 구성에는 있지만 요청 헤더에는 없음

Axios 인터셉터 토큰 헤더가 구성에는 있지만 요청 헤더에는 없음

나는 모든 요청이 나의 rest API로 전송되기 전에 토큰을 추가하는 것을 담당하는 acios atteractor를 만들었다.

import axios from 'axios';
import { store } from '../store/store';

export default function execute() {
    axios.interceptors.request.use(function(config) {
        const token = store.state.token;
        if(token) {
            config.headers.Authorization = `Bearer ${token}`;
            console.log(config);
            return config;
        } else {
            console.log('There is not token yet...');
            return config;
        }
    }, function(err) {
        return Promise.reject(err);
    });
}

2행에서 보듯이 나는 vuex 스토리지를 수입하고 있는데, 이 곳은 실제로 내 토큰이 입금된 곳이다.8행에서 나는 실제로 이 토큰을 추가할 것이다.config반대하다가 다음 줄에서 위로하고 있어

그것은 main.js 파일에서 다음과 같이 실행된다.

import interceptor from './helpers/httpInterceptor.js';
interceptor();

토큰이 콘솔에서 보는 구성 개체에 있음(위로를 받았기 때문에)config객체:

예상대로 API를 정지해 달라고 요청할 때마다 실행된다.토큰이 존재하는 경우(로그인 후) 모든 요청에 토큰 헤더를 추가해야 한다.불행히도 그것은 구성 오브젝트에 존재하지만 그것을 추가하지 않아 나를 약간 혼란스럽게 한다.

네트워크 탭에서 볼 수 있는 것처럼 실제 요청에 토큰을 추가하지 않음:

이 스크린샷은 물론 로그인 후 찍기 때문에 토큰은 이미 vuex 저장소에 있고, 로그아웃 기능(rest API 호출)을 실행한 후 구성(요청)을 위로해 주었다.

결과적으로 나는 토큰을 보내지 않았기 때문에 나의 rest API로부터 400 (Bad request) 상태가 응답한다.

EDIT!!!

나는 이 문제를 더 좋게 하기 위해 무엇을 추가할 수 있을까 하고 생각하고 있었다.나는 이것이 데모 플런커를 만드는 것이 불가능하다고 생각하여 나는 작은 리포지토리 데모를 만들기로 결정했다. 그래서 나는 당신이 다운로드해서 당신의 눈을 위한 이슈를 볼 수 있다.문제 해결에 도움이 되었으면 좋겠어!

난 이해했다.

rest API에 대한 restally request 이전에 실행되는 preflight request라는 것이 있는지 몰랐다.비행 전 요청이 실패하면 더 많은 헤더를 승인/수신하지 않는다.크롬 콘솔 네트워크 탭에서는 실제 요청으로 보지 못했지만, 구성 오브젝트에서는 볼 수 없었던 이유다.console.log가로채다

기존 URL이 아닌 다른 URL을 호출하던 리포지토리 데모에서도 동일하여 비행 전 요청도 실패하였다.이 데모를 만드는 동안 나는 비행 전 요청과 같은 것이 존재한다는 것을 전혀 몰랐기 때문에 기존의 URL 끝점이나 가상 URL 끝점으로 전화해도 상관없다는 것을 확신했다. 나는 두 가지 방법 모두 요청 헤더를 그곳에서 볼 수 있어야 한다고 생각했다.

만료된 정리 토큰에 대한 응답을 조작할 수도 있다.

  axios.interceptors.response.use(function (response) {
    return response;
  }, function (error) {
    if (401 === error.response.status) {
      console.log("Session Expired")
      //window.location = '/login'
    } else {
      return Promise.reject(error);
    }
  });

참조URL: https://stackoverflow.com/questions/47993195/axios-interceptor-token-header-is-present-in-config-but-not-in-request-headers