「リクエスト ヘッダー フィールド Access-Control-Allow-Headers は Access-Control-Allow-Headers によって許可されていません」エラーの解決

In最初のエラーを修正するために、さまざまなメソッドとヘッダーを許可するヘッダーがリクエストに追加されました。ただし、これにより、「リクエスト ヘッダー フィールド Access-Control-Allow-Origin は、Access-Control-Allow-Headers によって許可されていません。」

CORS およびプリフライト リクエストについてという新しいエラーが発生しました。

この問題は、ブラウザが特定のコンテンツ タイプのクロスオリジン リクエストに対してプリフライト OPTIONS リクエストを送信するという事実に起因します。デフォルトでは、Angular は application/json コンテンツ タイプでデータを送信し、これによりこのプリフライト リクエストがトリガーされます。

サーバー レスポンスとヘッダー

サーバーは、アクセスを明示的に許可する必要があります。エラーを防ぐために、応答に Control-Allow-Headers ヘッダーを追加します。それ以外の場合、ブラウザは応答をヘッダーを許可しないものとして解釈します。

解決策: コンテンツ タイプまたはサーバー応答の変更

この問題を解決するには、クライアントまたはサーバーの応答を変更します。サーバー構成:

1.クライアント側 (Angular):

デフォルトの Angular コンテンツ タイプを application/x-www-form-urlencoded に上書きします。これにより、プリフライト リクエストがトリガーされません:

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

2.サーバー側:

または、サーバー上で Access-Control-Allow-Headers ヘッダーを許可します。次の応答ヘッダーを設定する必要があります:

• Access-Control-Allow-Origin: * または特定のオリジン (例: https://example.com)
• Access-Control -Allow-Methods: GET、POST、PUT、DELETE、OPTIONS
• Access-Control-Allow-Headers: クライアントがリクエストで送信するすべてのヘッダー (Content-Type、Authorization など)