Axiosインターセプタトークンヘッダーはconfigにありますが、リクエストヘッダーには存在しません

Question

すべてのリクエストが残りのAPIに送信される前にトークンを追加するaxiosインターセプタを作成しました。

2行目からわかるように、私はvuexストレージをインポートしています。これは実際には私のトークンが保管されている場所です。 8行目では、実際にこのトークンをconfigオブジェクトに追加しています。そして、次の行で私はそれを慰めています。それは私のmain.js内で実行される

はそうのようなファイル：

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

（私はconfigオブジェクトを慰めたので）トークンが、私は私のコンソールに表示configオブジェクトに存在している：

期待どおりにAPIを休めるようにリクエストするたびに実行されます。トークンが存在する場合（ログイン後）、すべての要求にトークンヘッダーを追加する必要があります。残念ながら、私はちょっと混乱させるconfigオブジェクトには存在しますが、追加しません。私はネットワーク]タブで見ることができるよう

それは実際に本当の要求にトークンを追加しません：

このスクリーンショットをトークンはvuexストレージにすでにあり、それは慰めて、ログイン後に撮影したのは勿論です（APIを呼び出す）ログアウト関数を実行した後に、out config（インターセプタの一部）を実行します。

結果私はトークンを送信しなかったので、私の残りのAPIからの応答で400（悪い要求）ステータスがあります。

EDIT !!!

私は、この問題を改善するために何が追加できるか考えていました。私はこれがデモプランカーを作成することは不可能だと思うので、私は少しrepositoryデモを作成することに決めました。私はそれが問題を解決するのを助けることを願っています！

Answer 1

私はそれを理解します。

実際にAPIを休める要求の前に実行されるプリフライトリクエストと呼ばれるものがあることはわかりませんでした。プリフライト要求が失敗した場合は、より多くのヘッダを受け取り/受信しません。これは、私がクロムコンソールのネットワークタブで実際の要求でそれを見ることができなかった理由ですが、それは迎撃器でであった設定オブジェクトにありました。

既存のURLを呼び出さないリポジトリのデモと同じですので、プリフライトリクエストも失敗しました。このデモを作成している間は、プリフライト要求などが存在することは知らなかったので、既存のURLエンドポイントまたは架空のものを呼び出すかどうかは問題ではないと確信していましたが、どちらの方法でもリクエストヘッダーがあります。