Nagłówek tokenu przechwytującego Axios jest obecny w konfiguracji, ale nie w nagłówkach żądań.

Question

Utworzono przechwytywacz aksios, który jest odpowiedzialny za dodawanie tokena przed każdym wysłaniem żądania do mojego interfejsu API odpoczynku.

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

Jak widać w wierszu 2 importuję magazyn vuex i jest to właściwie miejsce, w którym mój token został złożony. W wierszu 8 tak naprawdę dodam ten token do obiektu config, a następnie w następnym wierszu pocieszam go.

jest on wykonywany w moich main.js złożyć tak:

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

Token jest obecny w obiekcie konfiguracyjnym, które widzę w mojej konsoli (bo pocieszył config Object):

Jest uruchamiany za każdym razem, gdy wysyłam żądanie obsługi interfejsu API zgodnie z oczekiwaniami. Jeśli token istnieje (po zalogowaniu), powinien dodać nagłówek tokena do każdego żądania. Niestety nie dodaje go, mimo że jest obecny na obiekcie konfiguracyjnym, co sprawia, że ​​jestem nieco zdezorientowany.

To faktycznie nie dodać token do prawdziwego wniosku, jak widzę w karcie sieciowej:

Ten zrzut ekranu jest oczywiście podjęte po zalogowaniu więc znacznik jest już w vuex przechowywania i pocieszał out config (część przechwytywacza) po wykonaniu funkcji wylogowania (która wywołuje interfejs API odpoczynku).

W wyniku mam status 400 (nieprawidłowe żądanie) w odpowiedzi z mojego rest API, ponieważ nie wysłałem tokena.

EDYCJA !!!

Zastanawiałem się, co mogę dodać do tego pytania, aby było lepiej. Myślę, że nie da się stworzyć demo plunkera, więc postanowiłem stworzyć małą wersję demo repository, którą można pobrać i zobaczyć problem dla oczu. Mam nadzieję, że pomoże to rozwiązać problem!

Answer 1

Rozumiem.

Nie wiedziałem, że istnieje coś, co nazywa się żądaniem preflight, które jest wykonywane przed rzeczywistym żądaniem spoczynku API. Jeśli żądanie wstępne nie powiedzie się, nie zaakceptuje/nie otrzyma więcej nagłówków. Dlatego nie widziałem go na prawdziwym wniosku w zakładce sieciowej konsoli chrome, ale był to obiekt konfiguracyjny, który był console.log wydany w przechwytywaczu.

To samo w demo repozytorium, które wywoływało nieistniejący adres URL, więc żądanie wstępnego uaktualnienia również tam się nie powiodło. Podczas tworzenia tego demo nie miałem pojęcia, że ​​coś takiego jak żądanie preflight istnieje, więc byłem pewien, że nie ma znaczenia, czy zadzwonię do jakiegoś istniejącego punktu końcowego adresu URL czy fikcyjnego, myślałem, że w obu przypadkach powinienem widzieć tam nagłówek żądania.