web-dev-qa-db-ja.com

jQuery CORSコンテンツタイプオプション

カスタムコンテンツタイプでjQuery CORSを使用してAJAX bodyリクエストを送信すると問題が発生します。ここに私のコードがあります。

$.ajax({
  url: "http://some-other-domain/my-path",
  type: "POST",
  contentType: "application/json",
  dataType: "json",
  data: JSON.stringify({
    key: 1,
    key2: 2
  }),
  statusCode: {
    200: function(data) {
    }
  },
  xhrFields: {
    withCredentials: true
  },
  crossDomain: true
});

サーバー側が必要なので、Content-typeを「application/json」に設定する必要があります。ただし、リクエストをPOSTとして送信する代わりに、jQueryはOPTIONSとして送信します。

ヘッダーは次のとおりです。

応答ヘッダー：

HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Pragma: No-cache
Cache-Control: no-cache
Expires: Thu, 01 Jan 1970 03:00:00 EET
Set-Cookie: JSESSIONID=BB9D6783E58FB0F2ADE1924A2F0CBA52; Path=/
Content-Type: text/html;charset=UTF-8
Content-Length: 6233
Date: Fri, 07 Sep 2012 14:41:13 GMT

リクエストヘッダー：

OPTIONS /my-path HTTP/1.1
Host: MY-HOME-NAME
User-Agent: MY_USER_AGEMT
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Origin: HERE-GOES-DOMAIN
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Pragma: no-cache
Cache-Control: no-cache

CORSはうまく機能し、必要なヘッダーはすべてサーバーから送信されますが、OPTIONSタイプで送信される場合はそうではありません。 jQueryの問題ですか？

jQuery-1.8.1

jqueryajaxcors
51
Alex Ivasyuv

このOPTIONSリクエストは、CORSプリフライトリクエストです。要求を行う許可を求めるために、実際の要求の前にサーバーに送信される要求です。実際、カスタムContent-Typeはプリフライトをトリガーしています。 CORS仕様（ http://www.w3.org/TR/cors/ ）によると、任意のContent-Typeotherapplication/x-www-form-urlencoded、multipart/form-data、またはtext/plainがプリフライトをトリガーする場合。

リモートサーバーを制御できない場合は、CORSプリフライトのサポートを依頼するか、JSON-Pなどの他のオプションを試す必要があります。

リモートサーバーを制御できる場合は、プリフライトを処理するように変更できます。プリフライトリクエストを処理するには、OPTIONSリクエストへの応答で次のヘッダーを送信する必要があります。

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type

応答はHTTP 200である必要があります。Access-Control-Allow-Methods応答ヘッダーは、Access-Control-Request-Method、または単にGET, POST, PUT, DELETEすべてのメソッドをサポートします。 Access-Control-Allow-Headers応答ヘッダーは、Access-Control-Request-Headers要求ヘッダー。

ブラウザがこれらのヘッダーを受信すると、実際のリクエストが行われます。 CORSプリフライトリクエストの詳細については、こちらをご覧ください。

http://www.html5rocks.com/en/tutorials/cors/

128
monsur