XMLHttpRequest cross domain throws error

Question

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>

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.

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.

If I use this code:

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

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

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.

JSONP is not magic. You can only use JSONP if the remote URL supports it. — SLaks, Mar 19 '12 at 05:02
Edited question since I figured out other problem I was having. — Manuel Fernández, Mar 19 '12 at 05:15
@SLaks How would the remote URL support it? EDIT: Got it working, thanks anyway. — Manuel Fernández, Mar 19 '12 at 05:17

score 2 · Accepted Answer · edited May 23 '17 at 12:11

Well known problem, the origin control of the browser:

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.

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:

JSONP (only GET)
CORS (work's very good with modern browser)
include an ifram + use PostMessage between the windows
proxy script

EDIT: 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");

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

well it is, but you also have to implement it on api-server side. — Johannes Staehlin, Mar 19 '12 at 05:19
You're welcome. I'm dealing with possible solution for weeks now. But be aware of IE. Even IE9 doesn't support CORS properly. Having a php-proxy script should be good fallback — Johannes Staehlin, Mar 19 '12 at 05:21

XMLHttpRequest cross domain throws error

1 Answers1

Linked