我在本地局域网(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

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


当前回答

我解决了自己的问题时使用谷歌距离矩阵API通过设置我的请求头与Jquery ajax。看看下面的内容。

var settings = {
          'cache': false,
          'dataType': "jsonp",
          "async": true,
          "crossDomain": true,
          "url": "https://maps.googleapis.com/maps/api/distancematrix/json?units=metric&origins=place_id:"+me.originPlaceId+"&destinations=place_id:"+me.destinationPlaceId+"&region=ng&units=metric&key=mykey",
          "method": "GET",
          "headers": {
              "accept": "application/json",
              "Access-Control-Allow-Origin":"*"
          }
      }

      $.ajax(settings).done(function (response) {
          console.log(response);

      });

注意我在设置中添加了什么 **

"headers": {
          "accept": "application/json",
          "Access-Control-Allow-Origin":"*"
      }

** 我希望这能有所帮助。

其他回答

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

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

function checkCorsSource(source) { var xmlHttpRequestObject; if (window.XMLHttpRequest) { xmlHttpRequestObject = new XMLHttpRequest(); if (xmlHttpRequestObject != null) { var sUrl = ""; if (source == "google") { var sUrl = "https://www.google.com"; } else { var sUrl = "https://httpbin.org/get"; } document.getElementById("txt1").innerHTML = "Request Sent..."; xmlHttpRequestObject.open("GET", sUrl, true); xmlHttpRequestObject.onreadystatechange = function() { if (xmlHttpRequestObject.readyState == 4 && xmlHttpRequestObject.status == 200) { document.getElementById("txt1").innerHTML = "200 Response received!"; } else { document.getElementById("txt1").innerHTML = "200 Response failed!"; } } xmlHttpRequestObject.send(); } else { window.alert("Error creating XmlHttpRequest object. Client is not CORS enabled"); } } } <html> <head> <title>Check if page is cors</title> </head> <body> <p>A CORS-enabled source has one of the following HTTP headers:</p> <ul> <li>Access-Control-Allow-Headers: *</li> <li>Access-Control-Allow-Headers: x-requested-with</li> </ul> <p>Click a button to see if the page allows CORS</p> <form name="form1" action="" method="get"> <input type="button" name="btn1" value="Check Google Page" onClick="checkCorsSource('google')"> <input type="button" name="btn1" value="Check Cors Page" onClick="checkCorsSource('cors')"> </form> <p id="txt1" /> </body> </html>

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

如果你的服务器响应正确,请求是有问题的,你应该在请求的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是必需的

我有完全相同的问题,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)

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

我解决了自己的问题时使用谷歌距离矩阵API通过设置我的请求头与Jquery ajax。看看下面的内容。

var settings = {
          'cache': false,
          'dataType': "jsonp",
          "async": true,
          "crossDomain": true,
          "url": "https://maps.googleapis.com/maps/api/distancematrix/json?units=metric&origins=place_id:"+me.originPlaceId+"&destinations=place_id:"+me.destinationPlaceId+"&region=ng&units=metric&key=mykey",
          "method": "GET",
          "headers": {
              "accept": "application/json",
              "Access-Control-Allow-Origin":"*"
          }
      }

      $.ajax(settings).done(function (response) {
          console.log(response);

      });

注意我在设置中添加了什么 **

"headers": {
          "accept": "application/json",
          "Access-Control-Allow-Origin":"*"
      }

** 我希望这能有所帮助。

我最后偶然发现了这个链接“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