Question

I’m getting this JavaScript error

XMLHttpRequest cannot load http://foo.bar.no/API/map_tools/clean_addresses/check. Origin http://foo.bar.no:9294 is not allowed by Access-Control-Allow-Origin.

This is all on the same domain and the same server, but my JavaScript project is being hosted by a standalone server script that automatically bundles the JavaScript and it’s dependencies into one file.

How do I get past this restriction while I’m developing?

---

I’ve tried allowing my JavaScript server script to connect. This is the result of a curl to the url:

HTTP/1.1 200 OK
Date: Wed, 11 Jan 2012 09:05:14 GMT
Server: Apache/2.2.16 (Debian)
Access-Control-Allow-Origin: http://foo.bar.no:9294
Vary: Accept-Encoding
Content-Length: 70
Content-Type: text/plain

array(1) {
  ["q"]=>
  string(31) "map_tools/clean_addresses/check"
}

And still I get the exact same error as I pasted above. Why does Chrome still refuse to connect to the damn URL when it’s obviously allowed to!?

Answer 1

OK I figured it out. I was looking for a simple and quick fix since I only need the cross domain requests for development purposes. Turns out that I just had to set both

header("Access-Control-Allow-Origin: http://foo.bar.no:9294");
header("Access-Control-Allow-Credentials: true");

In my PHP script on Apache. Then in my JavaScript code:

# Set jQuery ajax to use 'withCredentials' globally
$.ajaxSetup({
    xhrFields: {
        withCredentials: true
    }
});

And that did the trick