Geek Answers Handbook

Problems executing XMLHttpRequest from file: // to http: //

I am trying to execute XMLHttpRequest from a local file (file: //) using JQuery.ajax for something on http: // and from what I see it looks like the request is coming out (success callback is being called and Firebug shows the request) but there’s simply no answer.

Here is basically what I am doing:

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

Note. I use datatype: "text" , but it really doesn't matter what you use.

This will show an empty warning.

Now, if I were to guess, I should say that this is related to the same origin policy, but I am not getting the typical NS_ERROR_DOM_SECURITY_ERR exception (there are no errors in the console at all).

Does anyone have an explanation of what is happening?

Similar

UPDATE:

So, I came across a July 2009 article on hacks.mozilla.org , which seems to explain what is happening. Firefox> = 3.5 appears to be implementing the Cross-Origin Resource Sharing Specification (CORS) , which provides a mechanism for you to perform cross-site requests. What happens in this case is explained in the article:

In Firefox 3.5 and Safari 4, the XMLHttpRequest gateway will not successfully retrieve the resource unless the server provides the appropriate CORS headers (in particular, the Access-Control-Allow-Origin header) back with the resource, although the request will go through.

Please note that in my case, the request is sent with the Origin: null heading and a 200 OK response is returned. However, the server does not send the corresponding headers back, so the response body is not retrieved.

See also:

+4
source share
2 answers

(Answering my own question)

The reason the request is being made is because Firefox> = 3.5 implements the Cross-Origin Resource Sharing Specification (CORS) , which provides a mechanism for you to create cross-site HTTP requests. By default, these requests will not be sent using any credentials (HTTP Cookies and HTTP Authentication information).

However, the cross-site HTTP request cannot successfully retrieve the resource if the server does not provide the corresponding CORS header resources (in particular, Access-Control-Allow-Origin) with the resource. The answer will simply be ignored by the browser.

Here is 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 look at the response headers, you will see:

 Access-Control-Allow-Origin: *

This means "allow requests from any source."

Resources

+2
source

Additional notes:

 * Due to browser security restrictions, most "Ajax" requests are

in accordance with the same origin policy; The request cannot successfully retrieve data from another domain , subdomain, or protocol.

This is from the page you mentioned . JQuery ajax queries do not support cross-domain queries out of the box. There are some workarounds that Google search can provide, though ...

0
source

More articles:


All Articles