Question

I’m trying to do an XMLHttpRequest from a local file (file://) using JQuery.ajax to something on http:// and from what I can see it looks like the request is going out (the success callback is called and Firebug shows the request) but there is simply no response coming back.

Here’s basically what I’m doing:

$.ajax({
    url: "https://stackoverflow.com/users/63736/bruce-van-der-kooij",
    dataType: "text",
    success: function(text) {
        alert(text)
    }
})

Note I’m using datatype: "text" but it doesn’t really matter what you use.

This will show an empty alert.

Now, if I had to guess I’d have to say this has something to do with the same origin policy, but I’m not getting the typical NS_ERROR_DOM_SECURITY_ERR exception (there’s nothing at all in the error console).

So does anybody have an explanation for what’s going on?

Related

• Problem with making a simple JS XmlHttpRequest call

UPDATE:

So I came across a July 2009 article at hacks.mozilla.org that seems to explain what is going. Apparently Firefox >= 3.5 implements the Cross-Origin Resource Sharing (CORS) specification which provides a mechanism to allow you to make cross-site requests. What is happening in this case is explained in the article:

In Firefox 3.5 and Safari 4, a cross-site XMLHttpRequest will not successfully obtain the resource if the server doesn’t provide the appropriate CORS headers (notably the Access-Control-Allow-Origin header) back with the resource, although the request will go through.

Note that in my case the request is sent out with a header Origin: null and a 200 OK response is returned. However, the server isn’t sending back the appropriate headers so the response body is not retrieved.

Also see:

• Mozilla Developer Center – HTTP access control

Answer 1

(Answering my own question)

The reason the request goes out is because Firefox >= 3.5 implements the Cross-Origin Resource Sharing (CORS) specification which provides a mechanism to allow you to make cross-site HTTP requests. By default these requests will not send along any credentials (HTTP Cookies and HTTP Authentication information).

However a cross-site HTTP request will not successfully obtain the resource if the server doesn’t provide the appropriate CORS headers (notably Access-Control-Allow-Origin) back with the resource. The response will simply be ignored by the browser.

Here’s an example of a successful cross-site request (it retrieves my YouTube profile):

$.ajax({
    url: "http://gdata.youtube.com/feeds/api/users/brucevdk?v=2&alt=json",
    dataType: "json",
    success: function(response) {
        alert(response)
    }
})

If you take a look at the response headers you’ll see:

Access-Control-Allow-Origin: *

Which means “allow requests from any origin”.

Resources

• Mozilla Developer Center – HTTP access control
• cross-site xmlhttprequest with CORS