无法在 JQuery 1.6.4 中使用 CORS 进行 PUT/POST/DELETE HTTP 调用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7587812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unable to make PUT/POST/DELETE HTTP Call using CORS in JQuery 1.6.4
提问by ChrisBean
So, I can successfully make a GET call to my service using CORS. However, something must be going wrong at the preflight level for the POST, PUT, and DELETE operations. However, from what I can tell, the header responses my server is returning in response to the OPTIONS query are correct and match those described in
因此，我可以使用 CORS 成功地对我的服务进行 GET 调用。但是，对于 POST、PUT 和 DELETE 操作，预检级别一定会出错。但是，据我所知，我的服务器为响应 OPTIONS 查询而返回的标头响应是正确的，并且与
Here is my javascript code, using $.ajax in JQuery 1.6.4.
这是我的 javascript 代码，在 JQuery 1.6.4 中使用 $.ajax。
$.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);
}
});
Now, this is what my HTTP Trail looks like, courtesy of Firebug.
现在，这就是我的 HTTP Trail 的样子，由 Firebug 提供。
Request:
要求：
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
Response:
回复：
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
There is then no PUT (or POST or DELETE), I just get that annoying non-helpful xhr object that looks like this:
然后没有 PUT（或 POST 或 DELETE），我只是得到那个烦人的无帮助的 xhr 对象，如下所示：
readyState 0
responseText ""
status 0
statusText "error"
I'm very mystified that if I then remove the contentType in my Ajax call, and it sends an invalid content type per my application, the browser actually sends my PUT request, which fails because the Content-Type is not application/xml. See below:
我很困惑，如果我随后在我的 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);
}
});
Leads to this HTTP Trail, again courtesy of Firebug:
导致此 HTTP 路径，再次由 Firebug 提供：
Options Request:
选项请求：
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
Options Response:
选项响应：
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 Request:
放置请求：
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
Put Response:
放置响应：
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
The 415 makes sense because I don't support content application/x-www-form-urlencoded, only application/xml. What I don't understand is why does setting the Content-Type correctly prevent the PUT?
415 是有道理的，因为我不支持内容 application/x-www-form-urlencoded，只支持 application/xml。我不明白的是为什么正确设置 Content-Type 会阻止 PUT？
Thanks for any insight! I've been searching the internet for quite some time, and can't find a solution for this problem.
感谢您的任何见解！我已经在互联网上搜索了一段时间，但找不到解决此问题的方法。
回答by monsur
You need to include CORS headers in both the preflight and the actual response. So try including the following headers in the PUT response from your server:
您需要在预检和实际响应中包含 CORS 标头。因此，请尝试在来自您的服务器的 PUT 响应中包含以下标头：
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Allow-Headers: Content-Type
One other thing to note is that the CORS spec does not list '*' as a valid value for Access-Control-Allow-Headers:
需要注意的另一件事是 CORS 规范没有将“*”列为 Access-Control-Allow-Headers 的有效值：
http://www.w3.org/TR/cors/#access-control-allow-headers-response-he
http://www.w3.org/TR/cors/#access-control-allow-headers-response-he
Instead, you should try explicitly listing all the request headers like so:
相反，您应该尝试明确列出所有请求标头，如下所示：
Access-Control-Allow-Headers: Content-Type
You must include Content-Type because the Content-Type is not considered a simple header when its value is not application/x-www-form-urlencoded, multipart/form-data, or text/plain (See the CORS spec for more details on simple headers).
您必须包含 Content-Type 因为当 Content-Type 的值不是 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 时，Content-Type 不被视为简单标头（有关更多详细信息，请参阅 CORS 规范在简单的标题上）。
回答by user200068
Don't forget to make sure your prefight Options request also responded with:
不要忘记确保您的战前选项请求也响应了：
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Allow-Headers: Content-Type
