XMLHttpRequest跨域抛出错误

Question

我为注册使用的站点的顶级站点做了“投票”API。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

    <script type="text/javascript"> 

     var id = 1; 

     $(document).ready(function(){ 
      $.getJSON("http://mysite.com/index.php?page=vote", { id: id, hasVoted: 'unknown' }, function(data) { 
       if(data == 2) { 
        window.location.replace("http://mysite.com/index.php?page=vote&id=" + id); 
       } 
      }); 
     }); 

    </script> 

基本上，我给用户的ID，然后他们把这些代码放在他们的文件中。 该网站返回一个数字，然后重定向用户或不进行投票。

因此，在本地主机上的代码测试引发此错误：

XMLHttpRequest cannot load http://mysite.com/index.php?page=vote&id=1&hasVoted=unknown. Origin http://localhost is not allowed by Access-Control-Allow-Origin. 

如果我用这个代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

    <script type="text/javascript"> 

     var id = 1; 

     $(document).ready(function(){ 
      $.getJSON("http://mysite.com/index.php?page=vote&callback=?", { id: id, hasVoted: 'unknown' }, function(data) { 
       if(data == 2) { 
        window.location.replace("http://mysite.com/index.php?page=vote&id=" + id); 
       } 
      }); 
     }); 

    </script> 

然后，它什么都不做。它不会引发错误。 （虽然数据应该等于2（当直接检查URL时，它返回2））。

而且，如果我尝试做一点测试，并且做alert(data);它什么都不会抛出。

对此我完全无能为力。任何事情都会有帮助。

Answer 1

众所周知的问题，浏览器的起源控制：

浏览器不允许你做默认Ajax请求为“跨域”域。交叉来源意味着端口或主机不同。因此，无法将请求发送到站点http://siteB/，而请求的脚本托管在站点A上。

简单的解决方案是将一切事物托管在一个域中并使URL相对。如果这是不可能的，你必须找到另一种方式不允许跨源呼叫。 一些例子：

1. JSONP（只有GET）
2. CORS（工作的很好的与现代的浏览器）
3. 包括ifram +的窗口之间使用PostMessage的
4. 代理脚本

编辑： 我会做什么，首先让你的API服务器的一些东西，通过设置这些标头：

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

请注意，这与Internet Explorer无法正常工作，因此您必须使用：XDomainRequest。但是这不允许你发送标题。前两天请看my question，如果你必须发送标题异源