jQuery AJAX 跨域

您需要看一下同源策略：

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

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

相同的协议和主机

您需要实现 JSONP 才能解决它。

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

使用 JSONP。

j查询：

$.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了。在任何情况下，您都需要输出注意引号。jQuery 将传递自己的回调名称，因此您需要从 GET 参数中获取该名称。callbackName('jsonString')

正如 Stefan Kendall 所发布的，$.getJSON（） 是一个简写方法，但您需要将 URL 作为 GET 参数附加到 url 中（是的，value 是 ？，jQuery 将其替换为自己生成的回调方法）。'callback=?'

来自 Jquery 文档（链接）：

• 由于浏览器安全限制，大多数“Ajax”请求都受同源策略的约束;请求无法成功从其他域、子域或协议中检索数据。

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

因此，我认为您需要为请求使用jsonp。但是我自己没有尝试过。

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

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

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

当然，执行此操作的方法因语言而异。这是在 Rails 中：

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

在此示例中，该操作将接受来自任何域的 AJAX 请求，并返回响应“hello！”。say_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。

我使用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 传递给脚本。

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

• 服务器脚本（.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);
    }
});

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

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

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

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

http://enable-cors.org/

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

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

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

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

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

对于Microsoft Azure，它略有不同。

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

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

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

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

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

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

   或者只是通过向 .htaccess 文件添加以下代码来设置域：

   <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> SetEnvIf Origin "http(s)?://(www\.)?(google.com|staging.google.com|development.google.com|otherdomain.net|dev02.otherdomain.net)$" AccessControlAllowOrigin=$0 Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin </IfModule> </FilesMatch>

2. 您可以对服务器中的 PHP 文件进行 AJAX 请求，并使用此 PHP 文件处理对另一个域的请求。

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

它有效，你需要的一切：

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 }
});

它在PHP中工作，只需将其添加到所服务的页面中：

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

PS：我用方便实用的方法制作了自己的名为sa_ajax的xhr套件。（https://github.com/osergioabreu/sa_ajax/)