XMLHttpRequest跨域抛出错误 [英] XMLHttpRequest cross domain throws error

问题描述

我为注册使用的站点的顶级站点制作了一个投票" API.

I made a 'voting' API for a topsite for the sites registered to use.

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

Basically, I give the user's their ID and then they put that code in their files. The site returns a number and upon that, it redirects the user or not to voting.

因此，在localhost上对该代码进行测试会引发此错误:

So, testing on localhost that code throws this error:

 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)).

Then it does nothing. It throws no error. ( While data is supposed to be equal to 2 ( When checking that URL directly, it returns 2 ) ).

而且，如果我尝试进行一些测试，然后执行alert(data);它仍然不会抛出任何异常.

And, if I try to do a little test, and do alert(data); It throws nothing still.

我对此一无所知.一切都会有帮助的.

I'm completely clueless about this. Anything will help.

推荐答案

众所周知的问题，浏览器的原始控件:

Well known problem, the origin control of the browser:

默认情况下，浏览器不允许您向跨域"域发出Ajax请求.交叉原点意味着端口或主机不同.因此，当发出请求的脚本托管在站点A上时，您无法将请求发送到站点 http://siteB/

A browser doesn't allow you to make ajax requests to 'cross-origin' domains by default. Cross origin means, that either the port or host is different. Therefore you can't send requests to site http://siteB/ while the script to make the requests is hosted on site A.

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

Simple solution would be to host everything on one domain and make the url relative. If that's not possible, you have to find another way no make cross-origin calls. Some examples:

1. JSONP(仅GET)
2. CORS(在现代浏览器中效果很好)
3. 在窗口之间包含ifram +使用PostMessage
4. 代理脚本

我要做的是，首先通过设置以下标头来允许您的API-SERVER一些东西:

What I would do, is first allow your API-SERVER some stuff, by setting these headers:

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

请注意，这在Internet Explorer中无法正常工作，因此您必须使用:XDomainRequest.但这不允许您发送标头.如果您必须交叉发送标头，请几天前查看我的问题 -起源

Be aware, that this isn't working properly with the Internet Explorer, so you have to use: XDomainRequest. But this doesn't allow you sending headers. Please see my question a couple days ago, if you have to send headers cross-origin

这篇关于XMLHttpRequest跨域抛出错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！