web-dev-qa-db-ja.com

JQuery1.6.4でCORSを使用してPUT / POST / DELETEHTTP呼び出しを行うことができません

そのため、CORSを使用してサービスにGET呼び出しを正常に行うことができます。ただし、POST、PUT、およびDELETE操作のプリフライトレベルで問題が発生している必要があります。ただし、私が知る限り、OPTIONSクエリに応答してサーバーが返すヘッダー応答は正しく、で説明されているものと一致します。

これが、JQuery1.6.4で$ .ajaxを使用したJavaScriptコードです。

$.ajax({
  url: 'http://myhome:8080/TaskApproval/resources/tasks/2',
  context: this,
  data: '<?xml version="1.0" encoding="UTF-8"?> <task> <description>Get carrots from the grocery store</description><originator>Chris</originator><subject>Get Carrots !!</subject><taskId>2</taskId> </task> ',
  timeout: 30000,
  type: 'PUT',
  contentType: 'application/xml',
  success: function(response) {
    alert(response);
    result = response;
  },
  error: function(xhr) {
    alert('Error!  Status = ' + xhr.status + " Message = " + xhr.statusText);
  }
});

さて、これは私のHTTPトレイルがどのように見えるかです。Firebugのおかげです。

リクエスト：

OPTIONS /TaskApproval/resources/tasks/2 HTTP/1.1
Host: widgethome:8080
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:6.0.2) Gecko/20100101 Firefox/6.0.2
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
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Origin: http://localhost:8080
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: content-type

応答：

HTTP/1.1 200 OK
X-Powered-By: Servlet/3.0
Server: GlassFish v3
Allow: OPTIONS,GET,DELETE,HEAD,PUT, POST
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Max-Age: 1000
Access-Control-Allow-Headers: *
Content-Type: application/xml
Content-Length: 2792
Date: Wed, 28 Sep 2011 18:21:11 GMT

その場合、PUT（またはPOSTまたはDELETE））はありません。次のような、役に立たない迷惑なxhrオブジェクトが表示されます。

readyState  0 
responseText    ""
status  0
statusText  "error"

その後、Ajax呼び出しでcontentTypeを削除し、アプリケーションごとに無効なコンテンツタイプを送信すると、ブラウザーは実際にPUTリクエストを送信しますが、Content-Typeがapplication/xmlではないため失敗します。下記参照：

$.ajax({
  url: 'http://myhome:8080/TaskApproval/resources/tasks/2',
  data: '<?xml version="1.0" encoding="UTF-8"?> <task> <description>Get carrots from the grocery store</description><originator>Chris</originator><subject>Get Carrots !!</subject><taskId>2</taskId> </task> ',
  timeout: 30000,
  type: 'PUT',
  //contentType: 'application/xml',
  success: function(response) {
    alert(response);
    result = response;
  },
  error: function(xhr) {
    alert('Error!  Status = ' + xhr.status + " Message = " + xhr.statusText);
  }
});

再びFirebugの好意により、このHTTPトレイルにつながります。

オプションリクエスト：

OPTIONS /TaskApproval/resources/tasks/2 HTTP/1.1
Host: myhome:8080
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:6.0.2) Gecko/20100101 Firefox/6.0.2
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
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Origin: http://localhost:8080
Access-Control-Request-Method: PUT

オプションの応答：

HTTP/1.1 200 OK
X-Powered-By: Servlet/3.0
Server: GlassFish v3
Allow: OPTIONS,GET,DELETE,HEAD,PUT, POST
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Max-Age: 1000
Access-Control-Allow-Headers: *
Content-Type: application/xml
Content-Length: 2792
Date: Wed, 28 Sep 2011 18:26:23 GMT

リクエストを入れる：

PUT /TaskApproval/resources/tasks/2 HTTP/1.1
Host: myhome:8080
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:6.0.2) Gecko/20100101 Firefox/6.0.2
Accept: */*
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://localhost:8080/TaskApproval/crossdomain.html
Content-Length: 197
Origin: http://localhost:8080

応答を置く：

HTTP/1.1 415 Unsupported Media Type
X-Powered-By: Servlet/3.0
Server: GlassFish v3
Content-Type: text/html
Content-Length: 1069
Date: Wed, 28 Sep 2011 18:26:23 GMT

私はコンテンツapplication/x-www-form-urlencodedをサポートしておらず、application/xmlのみをサポートしているため、415は理にかなっています。私が理解していないのは、Content-Typeを正しく設定するとPUTが妨げられるのはなぜですか？

洞察力をありがとう！私はかなり長い間インターネットを検索してきましたが、この問題の解決策を見つけることができません。

jqueryhttpputcors
14
ChrisBean

プリフライトと実際の応答の両方にCORSヘッダーを含める必要があります。したがって、サーバーからのPUT応答に次のヘッダーを含めてみてください。

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Allow-Headers: Content-Type

もう1つ注意すべき点は、CORS仕様ではAccess-Control-Allow-Headersの有効な値として「*」がリストされていないことです。

http://www.w3.org/TR/cors/#access-control-allow-headers-response-he

代わりに、次のようにすべてのリクエストヘッダーを明示的にリストしてみてください。

Access-Control-Allow-Headers: Content-Type

Content-Typeは、その値がapplication/x-www-form-urlencoded、multipart/form-data、またはtext/plainでない場合、単純なヘッダーとは見なされないため、Content-Typeを含める必要があります（詳細については、CORS仕様を参照してください）。単純なヘッダー）。

32
monsur