CORS エラー: サーバーがプリフライト リクエストの「Content-Type」を拒否するのはなぜですか?

CORS エラー: 許可されたヘッダーの変更

ファイルのアップロードを伴う POST リクエストを実行しようとすると、ブラウザで次のエラーが頻繁に発生します。ヘッダー フィールド Content-Type は、Access-Control-Allow-Headers では許可されていません。

根本原因:

このエラーは、ブラウザーがクロスオリジンのリクエストをプリフライトするために発生します。 OPTIONS リクエストを送信することで、「multipart/form-data」などの非標準のコンテンツ タイプを含むリクエストを送信します。 OPTIONS リクエストは、標準の HTTP セットに含まれていない特定のリクエスト ヘッダーをサーバーが許可しているかどうかを確認します。

最初に試行された解決策:

この問題を解決するには、開発者は最初に次のヘッダーを POST リクエストに追加しようとしました:

"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 では許可されていません。

解決策:

この問題は、サーバーが「Content- 「Access-Control-Allow-Headers」構成の「Type」ヘッダー。ブラウザーは「Content-Type」ヘッダーを含むプリフライト OPTIONS リクエストを送信します。サーバーがそれを許可しない場合、CORS リクエストは失敗します。

このエラーを解決するには、開発者は Angular のデフォルトの「アプリケーション」を上書きする必要があります。 /json" コンテンツ タイプを使用するか、サーバーの Access-Control-Allow-Headers 構成で "Content-Type" を許可します。

Angular コード サンプル:

デフォルトを上書きするにはAngular のヘッダーでは、次のコードを使用できます:

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

以上がCORS エラー: サーバーがプリフライト リクエストの「Content-Type」を拒否するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。