jQuery AJAX 跨域

Question

这里有两个页面，test.php 和 testserver.php。

test.php

<script src="scripts/jq.js" type="text/javascript"></script>
<script>
    $(function() {
        $.ajax({url:"testserver.php",
            success:function() {
                alert("Success");
            },
            error:function() {
                alert("Error");
            },
            dataType:"json",
            type:"get"
        }
    )})
</script>

testserver.php

<?php
$arr = array("element1",
             "element2",
             array("element31","element32"));
$arr['name'] = "response";
echo json_encode($arr);
?>

现在我的问题是：当这两个文件位于同一服务器（本地主机或 Web 服务器）上时，它可以工作并且 alert( “成功”） 被调用；如果它位于不同的服务器上，即 Web 服务器上的 testserver.php 和本地主机上的 test.php，则它不起作用，并且 alert("Error") 正在执行。即使 AJAX 内的 URL 更改为 http://domain.example/path/to/file/testserver.php

Answer 1

使用 JSONP。

jQuery:

$.ajax({
     url:"testserver.php",
     dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
     success:function(json){
         // do stuff with json (in this case an array)
         alert("Success");
     },
     error:function(){
         alert("Error");
     }      
});

PHP:

<?php
$arr = array("element1","element2",array("element31","element32"));
$arr['name'] = "response";
echo $_GET['callback']."(".json_encode($arr).");";
?>

回声可能是错误的，我已经有一段时间没有使用 php 了。在任何情况下，您都需要输出 callbackName('jsonString') 注意引号。 jQuery 将传递它自己的回调名称，因此您需要从 GET 参数中获取该名称。

正如 Stefan Kendall 发布的那样， $.getJSON() 是一种简写方法，但是你需要将 'callback=?' 附加到 url 作为 GET 参数（是的，值为 ?，jQuery 用它自己生成的回调方法替换它）。

Answer 2

JSONP 是一个不错的选择，但还有一种更简单的方法。您只需在服务器上设置 Access-Control-Allow-Origin 标头即可。将其设置为 * 将接受来自任何域的跨域 AJAX 请求。 (https://developer.mozilla.org/en/http_access_control)

执行此操作的方法因语言而异， 当然。 Rails 中的情况如下：

class HelloController < ApplicationController
  def say_hello
    headers['Access-Control-Allow-Origin'] = "*"
    render text: "hello!"
  end
end

在此示例中，say_hello 操作将接受来自任何域的 AJAX 请求并返回“hello!”响应。

以下是它可能返回的标头示例：

HTTP/1.1 200 OK 
Access-Control-Allow-Origin: *
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Content-Type: text/html; charset=utf-8
X-Ua-Compatible: IE=Edge
Etag: "c4ca4238a0b923820dcc509a6f75849b"
X-Runtime: 0.913606
Content-Length: 6
Server: WEBrick/1.3.1 (Ruby/1.9.2/2011-07-09)
Date: Thu, 01 Mar 2012 20:44:28 GMT
Connection: Keep-Alive

尽管很简单，但它确实有一些浏览器限制。请参阅http://caniuse.com/#feat=cors。

Answer 3

您可以通过添加 Access-Control-Allow-Origin 通过 HTTP 标头进行控制。将其设置为 * 将接受来自任何域的跨域 AJAX 请求。

使用 PHP 非常简单，只需将以下行添加到您想要从域外部访问的脚本中：

header("Access-Control-Allow-Origin: *");

不要忘记在 httpd.conf 中启用 mod_headers 模块。

Answer 4

您需要查看同源政策：

在计算领域，同源策略
是一个重要的安全概念
浏览器端编程数量
语言，例如 JavaScript。这
策略允许脚本运行于
来自同一网站的页面
访问彼此的方法并且
没有具体的属性
限制，但阻止访问
大多数方法和属性
不同网站上的页面。

为了能够获取数据，它必须是：

相同的协议和主机

您需要实现JSONP 来解决它。

Answer 5

我必须从本地磁盘“file:///C:/test/htmlpage.html”加载网页，调用“http://localhost/getxml.php”url，并在 IE8+ 和 Firefox12+ 浏览器中执行此操作，使用 jQuery v1 .7.2 lib 以最小化样板代码。看了几十篇文章终于明白了。这是我的总结。

• 服务器脚本（.php、.jsp、...）必须返回 http 响应标头 Access-Control-Allow-Origin: *
• 在使用 jQuery ajax 之前在 javascript 中设置此标志： jQuery.support.cors = true;
• 您可以在使用 jQuery ajax 函数之前设置一次或每次标记，
• 现在我可以在 IE 和 Firefox 中读取 .xml 文档。其他浏览器我没有测试。
• 响应文档可以是纯文本/文本、xml、json 或其他任何格式。

这是一个带有一些调试系统输出的 jQuery ajax 调用示例。

jQuery.support.cors = true;
$.ajax({
    url: "http://localhost/getxml.php",
    data: { "id":"doc1", "rows":"100" },
    type: "GET",
    timeout: 30000,
    dataType: "text", // "xml", "json"
    success: function(data) {
        // show text reply as-is (debug)
        alert(data);

        // show xml field values (debug)
        //alert( $(data).find("title").text() );

        // loop JSON array (debug)
        //var str="";
        //$.each(data.items, function(i,item) {
        //  str += item.title + "\n";
        //});
        //alert(str);
    },
    error: function(jqXHR, textStatus, ex) {
        alert(textStatus + "," + ex + "," + jqXHR.responseText);
    }
});

Answer 6

诚然，同源策略会阻止 JavaScript 跨域发出请求，但 CORS 规范只允许您正在寻找的 API 访问类型，并且当前一批主要浏览器都支持该 API。

了解如何为客户端和服务器启用跨域资源共享：

http://enable-cors.org/

“跨源资源共享 (CORS) 是一种能够实现跨域边界真正开放访问的规范。如果您提供公共内容，请考虑使用 CORS 将其开放以进行通用 JavaScript/浏览器访问。”

Answer 7

这是可能的，但您需要使用 JSONP，而不是 JSON。斯特凡的链接为您指明了正确的方向。 jQuery AJAX 页面 提供了有关 JSONP 的更多信息。

Remy Sharp 有一个使用 PHP 的详细示例。

Answer 8

我使用 Apache 服务器，所以我使用了 mod_proxy 模块。启用模块：

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

然后添加：

ProxyPass /your-proxy-url/ http://service-url:serviceport/

最后，将 proxy-url 传递给您的脚本。

Answer 9

浏览器安全性可防止从一个域托管的页面到另一个域托管的页面进行 ajax 调用；这称为“同源策略”。

Answer 10

来自 Jquery 文档（链接）：

• 由于浏览器安全限制，大多数“ Ajax”请求遵循同源策略；该请求无法成功检索来自不同域、子域或协议的数据。

• 脚本和 JSONP 请求不受同源策略限制。

所以我认为您需要使用 jsonp 来请求。但我自己还没有尝试过这个。

Answer 11

使用 JSONP 的示例很少，其中包括错误处理。

但是，请注意，使用 JSONP 时不会触发错误事件！请参阅： http://api.jquery.com/jQuery.ajax/ 或 使用 jsonp 的 jQuery ajax 请求错误

Answer 12

我知道解决您问题的 3 种方法：

1. 首先，如果您有权访问这两个域，则可以使用以下方式允许访问所有其他域：

   header("Access-Control-Allow-Origin: *");

   或者只是通过将以下代码添加到 .htaccess 文件中来创建一个域：

   

SetEnvIf Origin "http(s)?://(www\.)?(google.com|staging.google.com|development.google.com|otherdomain.net|dev02.otherdomain.net)$" AccessControlAllowOrigin=$0
标头添加 Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin



2. 您可以向服务器中的 php 文件发出 ajax 请求，并使用此 php 文件处理对另一个域的请求。

3. 您可以使用 jsonp ，因为它不需要权限。为此，您可以阅读我们的朋友@BGerrissen 的回答。

Answer 13

只需将其添加到所提供的页面中，它就可以在 PHP 中工作：

header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');

PS：我已经使用方便且有用的方法制作了自己的 xhr 套件，名为 sa_ajax。 (https://github.com/osergioabreu/sa_ajax/)

Answer 14

对于 Microsoft Azure，情况略有不同。

Azure 有一个需要设置的特殊 CORS 设置。这在幕后本质上是相同的，但简单地设置 joshuarh 提到的标题是行不通的。可以在此处找到用于启用跨域的 Azure 文档：

https://learn.microsoft.com/en-us/azure/app-service-api/app-service-api-cors-consume-javascript

我摆弄了这个几个小时后才意识到我的托管平台有这种特殊设置。

Answer 15

它可以工作，您需要的一切：

PHP：

header('Access-Control-Allow-Origin: http://www.example.com');
header("Access-Control-Allow-Credentials: true");
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');

JS（jQuery ajax）：

var getWBody = $.ajax({ cache: false,
        url: URL,
        dataType : 'json',
        type: 'GET',
        xhrFields: { withCredentials: true }
});