jQuery AJAX 跨域

新手上路,请多包涵

这里有两个页面,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 许可协议

阅读 742
2 个回答

使用 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 许可协议

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 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏