跨源资源共享 (CORS) post 请求可以通过纯 JavaScript 工作，但为什么不使用 jQuery

Question

我的本地 LAN 上有一台机器（机器 A），它有两个 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)})

• 浏览器发出带有以下标头的 HTTP 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

• 服务器响应以下内容；

响应标头 - 选项（状态 = 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 标头（Access-Control-Allow-Origin：*）时发出 POST 请求。

为了进行故障排除，我还从 http://jquery.com。这就是我被难住的地方，来自 jquery.com，post 请求有效，一个 OPTIONS 请求在 POST 之后发送。此交易的标头如下；

请求标头 - 选项

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

响应标头 - 选项（状态 = 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（状态 = 200）好的）

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

我终于偶然发现了这个链接“

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

标头添加到所有 CORS 请求中。 jQuery 1.5.2 不这样做。另外，根据同一问题，设置服务器响应标头

Access-Control-Allow-Headers: *

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

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

Answer 2

请求：

 $.ajax({
            url: "http://localhost:8079/students/add/",
            type: "POST",
            crossDomain: true,
            data: JSON.stringify(somejson),
            dataType: "json",
            success: function (response) {
                var resp = JSON.parse(response)
                alert(resp.status);
            },
            error: function (xhr, status) {
                alert("error");
            }
        });

响应：

response = HttpResponse(json.dumps('{"status" : "success"}'))
response.__setitem__("Content-type", "application/json")
response.__setitem__("Access-Control-Allow-Origin", "*")

return response

Answer 3

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

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+"®ion=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":"*"
      }

**
我希望这有帮助。

Answer 4

我花了一些时间找到解决方案。

如果您的服务器响应正确并且请求出现问题，您应该将 withCredentials: true 添加到请求中的 xhrFields 中：

$.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

Answer 5

好吧，我在这个问题上挣扎了几个星期。

最简单、最合规且非 hacky 的方法可能是使用提供者 JavaScript API，它不会进行基于浏览器的调用，并且可以处理跨源请求。

例如 Facebook JavaScript API 和 Google JS API。

如果您的 API 提供程序不是最新的，并且在其响应中不支持跨源资源源“*”标头，并且没有 JS api（是的，我说的是您雅虎），您会遇到以下三个选项之一

1. - < p>在请求中使用 jsonp，将回调函数添加到您的 URL，您可以在其中处理响应。
   请注意，这将更改请求 URL，因此您的 API 服务器必须能够处理 URL 末尾的 ?callback=。

2. 将请求发送到您的 API 服务器，该服务器由您控制，并且与客户端位于同一域中，或者启用了跨源资源共享，您可以从这里将请求代理到第 3 方 API 服务器。

3. 在您发出 OAuth 请求并需要处理用户交互的情况下可能最有用哈哈！ window.open('url',"newwindowname",'_blank', 'toolbar=0,location=0,menubar=0')

Answer 6

这是对我有用的总结：

定义一个新函数（包装 $.ajax 以简化）：

jQuery.postCORS = function(url, data, func) {
  if(func == undefined) func = function(){};
  return $.ajax({
    type: 'POST', 
    url: url, 
    data: data, 
    dataType: 'json', 
    contentType: 'application/x-www-form-urlencoded', 
    xhrFields: { withCredentials: true }, 
    success: function(res) { func(res) }, 
    error: function() { 
            func({}) 
    }
  });
}

用法：

$.postCORS("https://example.com/service.json",{ x : 1 },function(obj){
      if(obj.ok) {
           ...
      }
});

也适用于 .done、.fail 等：

$.postCORS("https://example.com/service.json",{ x : 1 }).done(function(obj){
      if(obj.ok) {
           ...
      }
}).fail(function(){
    alert("Error!");
});

服务器端（在本例中为 example.com 托管），设置这些标头（在 PHP 中添加了一些示例代码）：

header('Access-Control-Allow-Origin: https://not-example.com');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Max-Age: 604800');
header("Content-type: application/json");
$array = array("ok" => $_POST["x"]);
echo json_encode($array);

这是我知道真正从 JS 跨域 POST 的唯一方法。

JSONP 将 POST 转换为 GET，这可能会在服务器日志中显示敏感信息。

Answer 7

将其与 Laravel 结合使用解决了我的问题。只需将此标头添加到您的 jquery 请求 Access-Control-Request-Headers: x-requested-with 中，并确保您的服务器端响应已设置此标头 Access-Control-Allow-Headers ：*。

Answer 8

我遇到了完全相同的问题，jquery ajax 只在发布请求上给了我 cors 问题，而 get 请求工作正常 - 我厌倦了上面的所有内容，但没有结果。我的服务器等中有正确的标头。改用 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)

希望这可以帮助其他遇到同样问题的人。

Answer 9

如果由于某些原因，在尝试添加标头或设置控制策略时仍然无济于事，您可以考虑使用 apache ProxyPass...

例如，在使用 SSL 的 中添加以下两个指令：

SSLProxyEngine On
ProxyPass /oauth https://remote.tld/oauth

确保加载以下 apache 模块（使用 a2enmod 加载它们）：

• proxy
• proxy_connect
• proxy_http

显然，您必须更改 AJAX 请求 url 才能使用 apache 代理...

Answer 10

这对聚会来说有点晚了，但我已经为此苦苦挣扎了几天。这是可能的，我在这里找到的答案都不起作用。这很简单。
这是 .ajax 调用：

    <!DOCTYPE HTML>
    <html>
    <head>
    <body>
     <title>Javascript Test</title>
     <script src="http://code.jquery.com/jquery-latest.min.js"></script>
     <script type="text/javascript">
     $(document).domain = 'XXX.com';
     $(document).ready(function () {
     $.ajax({
        xhrFields: {cors: false},
        type: "GET",
        url: "http://XXXX.com/test.php?email='[email protected]'",
        success: function (data) {
           alert(data);
        },
        error: function (x, y, z) {
           alert(x.responseText + " :EEE: " + x.status);
        }
    });
    });
    </script> 
    </body>
    </html>

这是服务器端的 php：

    <html>
    <head>
     <title>PHP Test</title>
     </head>
    <body>
      <?php
      header('Origin: xxx.com');
      header('Access-Control-Allow-Origin:*');
      $servername = "sqlxxx";
      $username = "xxxx";
      $password = "sss";
      $conn = new mysqli($servername, $username, $password);
      if ($conn->connect_error) {
        die( "Connection failed: " . $conn->connect_error);
      }
      $sql = "SELECT email, status, userdata  FROM msi.usersLive";
      $result = $conn->query($sql);
      if ($result->num_rows > 0) {
      while($row = $result->fetch_assoc()) {
        echo $row["email"] . ":" . $row["status"] . ":" . $row["userdata"] .  "<br>";
      }
    } else {
      echo "{ }";
    }
    $conn->close();
    ?>
    </body>