如何获得跨源资源共享(CORS)后请求工作

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

转到http://machineA:8080，显示库显示Library。用户单击“转换”链接，发出以下命令-

jQuery Ajax请求

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

浏览器发出一个带有以下报头的HTTP OPTIONS请求;

请求头- OPTIONS

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

服务器响应如下;

响应头- OPTIONS (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

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

为了排除故障，我还发布了相同的$。从http://jquery.com发布命令。这就是我难住的地方，从jquery.com, post请求工作，OPTIONS请求被post发送。来自该事务的标题如下;

请求头- OPTIONS

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

响应头- OPTIONS (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

请求头- 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

响应头- 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

我不明白为什么同样的请求在一个站点上可以工作，而在另一个站点上就不行。我希望有人能指出我错过了什么。谢谢你的帮助!

当前回答

我最后偶然发现了这个链接“CORS POST请求可以用普通javascript实现，但为什么用jQuery不行?”，它指出jQuery 1.5.1添加了

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

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

Access-Control-Allow-Headers: *

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

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

2011-04-22 07:33:08

其他回答

我为这个问题纠结了几个星期。

要做到这一点，最简单、最兼容和最不受黑客攻击的方法可能是使用提供者JavaScript API，它不进行基于浏览器的调用，可以处理跨源请求。

例如Facebook JavaScript API和谷歌JS API。

如果你的API提供者不是当前的，在它的响应中不支持Cross Origin Resource Origin '*'头，并且没有JS API(是的，我是在说你雅虎)，你有三个选择之一-

Using jsonp in your requests which adds a callback function to your URL where you can handle your response. Caveat this will change the request URL so your API server must be equipped to handle the ?callback= at the end of the URL. Send the request to your API server which is controller by you and is either in the same domain as the client or has Cross Origin Resource Sharing enabled from where you can proxy the request to the 3rd party API server. Probably most useful in cases where you are making OAuth requests and need to handle user interaction Haha! window.open('url',"newwindowname",'_blank', 'toolbar=0,location=0,menubar=0')

2015-08-01 13:39:31

此函数将从启用cors的页面异步获取HTTP状态应答。如果通过XMLHttpRequest访问，只有具有正确标题的页面才会返回200状态——无论是使用GET还是POST。如果您只需要一个json对象，除了使用JSONP之外，在客户端无法解决这个问题。

可以修改以下内容以获得xmlHttpRequestObject对象中保存的数据:

2017-09-14 21:31:19

我最后偶然发现了这个链接“CORS POST请求可以用普通javascript实现，但为什么用jQuery不行?”，它指出jQuery 1.5.1添加了

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

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

Access-Control-Allow-Headers: *

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

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

2011-04-22 07:33:08

我有完全相同的问题，jquery ajax只给了我在post请求的cors问题得到请求工作得很好-我累了上面的一切没有结果。我有正确的头在我的服务器等。改用XMLHTTPRequest而不是jquery立即解决了我的问题。无论我使用哪个版本的jquery，它都没有修复它。如果不需要向后兼容浏览器，Fetch也可以正常工作。

        var xhr = new XMLHttpRequest()
        xhr.open('POST', 'https://mywebsite.com', true)
        xhr.withCredentials = true
        xhr.onreadystatechange = function() {
          if (xhr.readyState === 2) {// do something}
        }
        xhr.setRequestHeader('Content-Type', 'application/json')
        xhr.send(json)

希望这能帮助其他有同样问题的人。

2018-06-18 18:24:50

我花了些时间才找到答案。

如果你的服务器响应正确，请求是有问题的，你应该在请求的xhrFields中添加withCredentials: true:

$.ajax({
    url: url,
    type: method,
    // This is the important part
    xhrFields: {
        withCredentials: true
    },
    // This is the important part
    data: data,
    success: function (response) {
        // handle the response
    },
    error: function (xhr, status) {
        // handle errors
    }
});

注意:jQuery >= 1.5.1是必需的

2017-03-02 11:32:47

如何获得跨源资源共享(CORS)后请求工作

推荐文章

最新文章

标签