jquery - 如何使跨源资源共享 (CORS) 发布请求正常工作

Question

我的本​​地局域网 (machineA) 上有一台机器，它有两个 Web 服务器。第一个是 XBMC 中内置的(在端口 8080 上)并显示我们的库。第二台服务器是 CherryPy python 脚本(端口 8081)，我用它来按需触发文件转换。文件转换由来自 XBMC 服务器提供的页面的 AJAX POST 请求触发。

• 转到 http://machineA:8080显示图书馆
• 显示图书馆
• 用户点击“转换”链接，发出以下命令 -

jQuery Ajax 请求

$.post('http://machineA:8081', {file_url: 'asfd'}, function(d){console.log(d)})

• 浏览器发出带有以下 header 的 HTTP OPTIONS 请求；

请求 header - 选项

Host: machineA:8081
User-Agent: ... Firefox/4.01
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
Keep-Alive: 115
Connection: keep-alive
Origin: http://machineA:8080
Access-Control-Request-Method: POST
Access-Control-Request-Headers: x-requested-with

• 服务器响应如下；

响应 header - 选项(STATUS = 200 OK)

Content-Length: 0
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1728000
Server: CherryPy/3.2.0
Date: Thu, 21 Apr 2011 22:40:29 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Content-Type: text/html;charset=ISO-8859-1

• 然后谈话停止了。理论上，浏览器应该在服务器以正确的 (?) CORS header (Access-Control-Allow-Origin: *) 响应时发出 POST 请求

为了排除故障，我还从 http://jquery.com 发出了相同的 $.post 命令.这是我感到困惑的地方，来自 jquery.com，post 请求有效，OPTIONS 请求在 POST 之后发送。此交易的 header 如下；

请求 header - 选项

Host: machineA:8081
User-Agent: ... Firefox/4.01
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
Keep-Alive: 115
Connection: keep-alive
Origin: http://jquery.com
Access-Control-Request-Method: POST

响应 header - 选项(STATUS = 200 OK)

Content-Length: 0
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1728000
Server: CherryPy/3.2.0
Date: Thu, 21 Apr 2011 22:37:59 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Content-Type: text/html;charset=ISO-8859-1

请求 header - POST

Host: machineA:8081
User-Agent: ... Firefox/4.01
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
Keep-Alive: 115
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://jquery.com/
Content-Length: 12
Origin: http://jquery.com
Pragma: no-cache
Cache-Control: no-cache

响应 header - POST(STATUS = 200 OK)

Content-Length: 32
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1728000
Server: CherryPy/3.2.0
Date: Thu, 21 Apr 2011 22:37:59 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Content-Type: application/json

我不明白为什么同一个请求在一个网站上有效，而在另一个网站上无效。我希望有人能够指出我所缺少的东西。感谢您的帮助!

Answer 1

我终于偶然发现了这个链接“A CORS POST request works from plain javascript, but why not with jQuery?”，它指出 jQuery 1.5.1 添加了

 Access-Control-Request-Headers: x-requested-with

所有 CORS 请求的 header 。 jQuery 1.5.2 不这样做。另外，根据同样的问题，设置服务器响应头

Access-Control-Allow-Headers: *

不允许响应继续。您需要确保响应 header 明确包含所需的 header 。即:

Access-Control-Allow-Headers: x-requested-with