クロスドメイン（CORS）XMLHttpRequestでカスタムヘッダーを送信するにはどうすればよいですか？

Question

JSONペイロードのCORSリクエストを送信しようとしています。サーバーとクライアントの両方を制御します。

私はここに従っています： https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS?redirectlocale=en-US&redirectslug=HTTP_access_control

サーバーには、すべてのリクエストと共に送信する必要があるカスタムヘッダーがあります。したがって、このカスタムヘッダーはリクエストを「単純ではない」ものにするため、OPTIONSリクエストを使用してリクエストをプリフライトする必要があります。

JqueryがOPTIONSリクエストを作成しているのを確認できますが、カスタムヘッダーが一緒に送信されません。

私が試した方法：

• beforeSendオプションの使用： http://api.jquery.com/jQuery.ajax/
• ajaxプレフィルターの使用： http://api.jquery.com/jQuery.ajaxPrefilter/

どちらの場合も、ブラウザはカスタムヘッダーを一緒に送信していません。

私はFF 17.0.1、jquery 1.8.3を使用しています。

Answer 1

あなたの問題はjqueryではなく、 CORSの仕組み にあります。 beforeSendコールバックはおそらく期待どおりに機能していましたが、ブラウザーはプリフライトリクエストでカスタムヘッダーを送信しません。これは仕様によるものです。プリフライト要求の目的は、ユーザーエージェント（ブラウザ）がCORS仕様で定義された「単純な」ものを超えて送信できる情報を決定することです。したがって、プリフライトリクエストの一部としてユーザーエージェントが任意の単純でないデータ（カスタムヘッダーなど）を送信することは、自己防衛的です。

実際のCORSリクエストにカスタムヘッダーを含めるようにユーザーエージェントに指示するには、プリフライトレスポンスに Access-Control-Allow-Headers header を含めます。ユーザーエージェントが送信するヘッダーに過度に関心がない場合は、Access-Control-Request-Headersリクエストヘッダーフィールドの値を、送信したAccess-Control-Allow-Headersの値としてエコーバックできると思います。応答。

仕様の構文セクション で定義されている他のAccess-Control-Allow-*ヘッダーを含めることもできます。

参照 CORS-httpリクエストを「プリフライト」する方法

これらのヘッダーの動作を示す MozillaのCORSプリフライトの例 も参照してください。