javascript - 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>

然后它什么也不做。它不会抛出任何错误。 (虽然 data 应该等于 2(直接检查该 URL 时，它返回 2))。

而且，如果我尝试做一些测试，并执行 alert(data); 它仍然不会抛出任何内容。

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

Answer 1

众所周知的问题，浏览器的origin控制:

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

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

1. JSONP(仅限 GET)
2. CORS(在现代浏览器中工作得很好)
3. 包含一个 iram + 在窗口之间使用 PostMessage
4. 代理脚本

编辑: 我要做的就是首先通过设置这些 header 来允许您的 API 服务器执行一些操作:

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

请注意，这在 Internet Explorer 中无法正常工作，因此您必须使用:XDomainRequest。但这不允许您发送 header 。请参阅my question几天前，如果您必须跨域发送 header