AngularインターセプタとCORS

Question

Angularを使用してすべてのHTTPリクエストにトークンを追加するインターセプタを作成しようとしています。ここで与えられたレシピを使用しています - https://thinkster.io/interceptors

このコードでは、httpモジュールの工場とtokenInterceptor()機能を使用しています。要求にヘッダとしてトークンを追加することはできますが、今度はインターセプタを通過すると、何らかのCORSブロック機構によってブロックされます。このエラーがクロームコンソールに表示されます。 -

XMLHttpRequestは、http://127.0.0.1：/をロードできません。 プリフライト要求への応答がアクセス制御チェックを通過しません。いいえ 要求された リソースに 'Access-Control-Allow-Origin'ヘッダーが存在します。 Origin 'http://127.0.0.1：/'は なので、アクセスは許可されていません。私はオンラインのいくつかの提案を試してみましたが、どれも助けない

config.headers['Access-Control-Allow-Origin'] = '*'; 

：応答は、私は無駄に私の迎撃に以下のような原点ヘッダーのアクセス制御を可能に設定しようとしたHTTPステータスコード403

を持っていました。 CORS関連の問題を解決するためには、クライアント側で何かを行う必要がありますか？それともすべてサーバー側の懸念ですか？

Answer 1

要求に応答するサーバーだけではなくGETとPOST要求に対して、OPTIONS要求についてAccess-Control-Allow-Originレスポンスヘッダを送信する必要があります。それが実際の要求を試みる前に、あなたが作るしようとしている：プリフライトリクエストに

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests

レスポンスは、ブラウザがあなたにそのエラーを与える理由は、アクセス制御チェック

を渡しません。フロントエンドのJSコードからブラウザはOPTIONSリクエストを送信して、サーバーがあなたが作成しようとしている種類のリクエストを受信することを選択しているかどうかを確認します。

だからあなたのサーバー側のコードはAccess-Control-Allow-Origin、Access-Control-Allow-Headers & Access-Control-Allow-Methodsで応答するOPTIONS要求のための取り扱いを追加する必要があります。

CORS関連の問題を解決するには、クライアント側で何かを行う必要がありますか、それともすべてサーバー側の懸念ですか？

動作を変更したり、ブラウザでエラーが発生しないようにするには、クライアント側で何もできません。 CORSの設定はすべてサーバー側の問題です。サーバーでOPTIONSを処理する必要があります。

応答

は、HTTPステータスコードの認証失敗を示す403

を持っていました。これは、サーバがOPTIONS要求に対して成功応答（200または204）を送信するように設定されていないためです。その場合は、200または204にはAccess-Control-Allow-*ヘッダーがあり、レスポンスボディー）、または許可が必要な要求を送信しようとしていて、許可が失敗している可能性があります。