Angular で POST リクエストでファイルを送信するときに、「Access-Control-Allow-Origin」ヘッダーが「Access-Control-Allow-Headers」で許可されないのはなぜですか?

問題: ヘッダーを含むクロスオリジン リクエスト エラー

POST リクエストでファイルを送信しようとすると、開発者は次のことを示すエラーが発生する場合があります。特定のリクエスト ヘッダーは、Access-Control-Allow-Headers レスポンス ヘッダーでは許可されていません。

この問題を解決するために、開発者はリクエストに次のヘッダーを追加しました。

"Access-Control-Allow-Origin" : "*",
"Access-Control-Allow-Methods" : "GET,POST,PUT,DELETE,OPTIONS",
"Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"

ただしこれにより、「Access-Control-Allow-Origin」ヘッダーが「Access-Control-Allow-Headers」ヘッダーによって許可されていないことを示す新しいエラーが発生しました。

解決策: ヘッダーの制限とデフォルトのコンテンツ タイプ

クロスオリジン リクエストの場合、コンテンツ タイプが次の 3 つの特定のタイプのいずれかに設定されていない場合、ブラウザはプリフライト OPTIONS リクエストを送信します: "application/x-www-form-urlencoded" 、「multipart/form-data」、または「text/plain」。

デフォルトでは、Angular はコンテンツ タイプを「application/json」に設定しますが、これはクロスオリジン リクエストで許容されるタイプの 1 つではありません。 。これにより、プリフライト OPTIONS リクエストがトリガーされますが、「Access-Control-Allow-Headers」ヘッダーの制限により拒否されます。

この問題を解決するには、開発者は Angular またはサーバー側で「Access-Control-Allow-Headers」ヘッダーを許可します。

デフォルトのヘッダーを上書きする Angular サンプル:

$http.post(url, data, {
    headers : {
        'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
    }
});

以上がAngular で POST リクエストでファイルを送信するときに、「Access-Control-Allow-Origin」ヘッダーが「Access-Control-Allow-Headers」で許可されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。