Tiêu đề mã thông báo chặn đối tượng có trong cấu hình nhưng không có trong tiêu đề yêu cầu

Question

Tôi đã tạo trình chặn chặn trục có trách nhiệm thêm mã thông báo trước khi mọi yêu cầu được gửi tới API còn lại của tôi.

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

Như bạn có thể thấy trong dòng 2 Tôi đang nhập kho lưu trữ vuex và đây thực sự là nơi thẻ của tôi được gửi. Trong dòng 8 tôi thực sự thêm mã thông báo này vào đối tượng config và sau đó trong dòng tiếp theo tôi sẽ an ủi nó.

Nó được thực hiện trong main.js tôi nộp như sau:

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

Mã là hiện diện trong đối tượng cấu hình mà tôi nhìn thấy trong giao diện điều khiển của tôi (vì tôi an ủi config đối tượng):

Nó chạy mỗi khi tôi thực hiện một số yêu cầu để nghỉ ngơi API như mong đợi. Nếu mã thông báo tồn tại (sau khi đăng nhập), nó sẽ thêm tiêu đề mã thông báo vào mọi yêu cầu. Thật không may nó không thêm nó mặc dù nó có mặt trên đối tượng config mà làm cho tôi một chút bối rối.

Nó không thực sự thêm thẻ để yêu cầu thực như tôi có thể nhìn thấy trong tab mạng:

screenshot Đây là khóa học được thực hiện sau khi đăng nhập vì vậy các mã thông báo là đã có trong lưu trữ vuex và nó an ủi ra cấu hình (một phần của interceptor) sau khi tôi thực hiện chức năng đăng xuất (mà gọi API còn lại).

Kết quả là tôi có trạng thái 400 (Yêu cầu không hợp lệ) để phản hồi từ API còn lại của tôi vì tôi không gửi mã thông báo.

EDIT !!!

Tôi đã suy nghĩ những gì tôi có thể thêm vào câu hỏi này để làm cho nó tốt hơn. Tôi nghĩ rằng điều này là không thể để tạo ra bản demo plunker vì vậy tôi quyết định tạo ra ít repository demo mà bạn có thể tải về và xem vấn đề cho đôi mắt của bạn. Tôi hy vọng nó sẽ giúp giải quyết vấn đề!

Answer 1

Tôi tìm ra.

Tôi không biết rằng có một cái gì đó gọi là yêu cầu preflight được thực hiện trước khi yêu cầu thực sự để nghỉ ngơi API. Nếu yêu cầu preflight thất bại, nó sẽ không chấp nhận/nhận thêm tiêu đề. Đây là lý do tại sao tôi không nhìn thấy nó trên yêu cầu thực sự trong tab mạng chrome console nhưng nó đã được trong đối tượng cấu hình được console.log ed trong đánh chặn.

Tương tự trong bản giới thiệu kho lưu trữ đang gọi không tồn tại URL nên yêu cầu preflight không thành công ở đó. Trong khi tạo bản demo này, tôi không có ý kiến ​​gì về yêu cầu preflight tồn tại nên tôi chắc chắn rằng không quan trọng nếu tôi gọi một số điểm cuối URL hoặc hư cấu hiện tại, tôi nghĩ rằng theo cả hai cách tôi có thể thấy tiêu đề yêu cầu ở đó.