クロスオリジンリクエストの「リクエストヘッダーフィールド Access-Control-Allow-Headers は Access-Control-Allow-Headers によって許可されていません」エラーを修正する方法

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

最初のエラーを修正するために、さまざまなメソッドとヘッダーを許可するヘッダーがリクエストに追加されました。ただし、これにより新しいエラーが発生しました: 「リクエスト ヘッダー フィールド 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 など)

以上がクロスオリジンリクエストの「リクエストヘッダーフィールド Access-Control-Allow-Headers は Access-Control-Allow-Headers によって許可されていません」エラーを修正する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。