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，然后他们将该代码放入他们的文件中。 该网站返回一个数字，然后将用户重定向或不进行投票。

因此，在 localhost 上测试该代码会引发此错误：

 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>

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

而且，如果我尝试做一个小测试，然后做 alert(data); 它仍然不会抛出任何东西。

我对此一无所知。任何事情都会有所帮助。

Answer 1

众所周知的问题，浏览器的原点控制：​​

默认情况下，浏览器不允许您向“跨域”域发出 ajax 请求。跨源意味着端口或主机不同。因此，当发出请求的脚本托管在站点 A 上时，您无法向站点 http://siteB/ 发送请求。

简单的解决方案是将所有内容托管在一个域上，并使 url 相对。如果这不可能，您必须找到另一种不进行跨域调用的方法。 一些例子：

1. JSONP（仅 GET）
2. CORS（在现代浏览器中工作非常好）
3. 在窗口之间包含 ifra + 使用 PostMessage
4. 代理脚本

编辑： 我要做的是首先通过设置这些标头来允许您的 API-SERVER 一些东西：

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

请注意，Internet Explorer 无法正常工作，因此您必须使用：XDomainRequest。但这不允许您发送标头。前几天请看my question，如果你必须跨域发送headers