jQuery AJAX 跨域

Question

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

测试.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>

测试服务器.php

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

现在我的问题：当这两个文件都在同一个服务器上（本地主机或网络服务器）时，它可以工作并调用 alert("Success") ；如果它在不同的服务器上，意味着 web 服务器上的 testserver.php 和本地主机上的 test.php，它不工作，并且 alert("Error") 正在执行。即使AJAX里面的URL改成 http://domain.example/path/to/file/testserver.php

原文由 Firose Hussain 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 用它自己生成的回调方法替换它）。

原文由 BGerrissen 发布，翻译遵循 CC BY-SA 3.0 许可协议

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 。

原文由 jrh 发布，翻译遵循 CC BY-SA 3.0 许可协议