Axios 인터셉터 토큰 헤더가 config에는 있지만 요청 헤더에는 존재하지 않습니다.

Question

모든 요청이 나머지 API로 보내지기 전에 토큰을 추가하는 axios 인터셉터를 만들었습니다.

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

당신이 라인 내가 vuex 저장 수입하고있어 2에서 볼 수있는 내 토큰이 증착되는 곳이 실제로 배치되기 때문에. 8 번 줄에서 실제로이 토큰을 config 개체에 추가하고 다음 줄에서 그것을 정리하고 있습니다.

그것은 내 main.js에서 실행되는

은과 같이 파일 :

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

토큰은 (내가 config 객체를 위문하기 때문에) 내 콘솔에 표시되는 구성 객체에 존재 :

예상대로 API를 요청할 때마다 실행됩니다. 토큰이 존재하면 (로그인 후) 모든 요청에 ​​토큰 헤더를 추가해야합니다. 불행하게도, 비록 약간 혼란스럽게 만드는 설정 객체에 존재하지만 추가하지는 않습니다. 내가 네트워크 탭에서 볼 수

사실은 실제 요청에 토큰을 추가하지 않습니다 :

이 스크린 샷을 토큰이 vuex 저장 이미 그것은 사라지고 있도록 로그인 후 촬영 물론입니다 (API를 호출하는) 로그 아웃 기능을 실행 한 후 (인터셉터의 일부) out config.

결과 토큰을 보내지 않았기 때문에 내 휴식 API의 응답으로 400 (잘못된 요청) 상태가 표시됩니다.

EDIT !!!

나는 이것을 개선하기 위해이 질문에 무엇을 추가 할 수 있을지 생각하고있었습니다. 나는 데모 플 런커를 만드는 것이 불가능하다고 생각하여, 당신의 눈에 문제를 다운로드하고 볼 수있는 작은 repository 데모를 만들기로 결정했습니다. 문제 해결에 도움이되기를 바랍니다.

Answer 1

알아낼 수 있습니다.

API를 실제로 요청하기 전에 실행되는 프리 플라이트 요청이라는 것을 알지 못했습니다. 프리 플라이트 요청이 실패하면 더 많은 헤더를 수신/수신하지 않습니다. 이것이 내가 크롬 콘솔 네트워크 탭에서 실제 요청을 보지 못했던 이유이지만, 인터셉터에서 이라는 설정 객체에있었습니다.

기존 URL이없는 저장소 데모와 동일하므로 프리 플라이트 요청도 실패했습니다. 이 데모를 만드는 동안 프리 플라이트 요청과 같은 것이 존재한다는 것을 알지 못 했으므로 기존 URL 끝점 또는 가상의 하나를 호출하면 문제가되지 않는다고 확신했습니다. 두 가지면에서 볼 수 있어야한다고 생각했습니다. 요청 헤더가 있습니다.