I am currently testing some JavaScript that makes a GET request (ie. XMLHttpRequest with "get") with a Range header. Because the request is cross-domain, I'm implementing access control headers in the response as described here:
https://developer.mozilla.org/En/HTTP_access_control#Preflighted_requests
What's confusing me however is that my current server setup is working in Chrome but not in Firefox. Specifically, when I run the JavaScript in Chrome I'm getting back a chunk of the requested data, just like I want. In Firefox however I'm getting error code 501 on request method OPTIONS
At first that seems like the OPTIONS request method needs to be handled by the server, but that works in Chrome so it looks like this is a red herring and something else is wrong. Currently the following response headers are implemented, perhaps this is where the problem lies:
Access-Control-Allow-Headers: Range
Access-Control-Allow-Origin: *
Anyone have any insight in what I need to do? Do Chrome and Firefox handle cross-domain restrictions differently?
Related
Via Firefox, if I do a GET text/html request to my web app, I get a 200 response back, and then Firefox sends 3 more of the same request right afterward. All return 200s. Does anyone know what would cause this?
*Some other observations about the issue:
In Firebug's network tab, only one request shows up. I can only see the extra requests using Tamper Data or another tool that sees the Http requests sent from my browser.
This issue does not happen in prior versions of my web app. When I compare the responses that get returned by the two different versions of the web app, I can't see anything that would cause this issue (but then, I really don't know what to look for). The responses are identical except for the web app's cookies, which are different.
This issue happens with JavaScript enabled or disabled.
Something similar is happening with Chrome, though it seems to be sending only 2 extra requests.
I don't see any browser redirects in the Html header.
This is only happening with text/html requests, not css requests, for example.
All 4 responses returned seem to have the complete Html page in the body, and they also have the cookie that the web app uses.
In Tamper Data, the 'Load Flags' column (whatever that is) says the following: First request is VALIDATE_ALWAYS_LOAD_DOCUMENT_URI LOAD_INITIAL_DOCUMENT_URI; second and third requests are LOAD_NORMAL; fourth request is LOAD_FROM_CACHE VALIDATE_NEVER
I don't see it happening with POSTs
It does not happen when the response is a 302.
If I go into the firefox config and set network.http.max-connections-per-server to 1, then Firefox only sends one request (the issue does not occur). (I don't think I can ask all our users to do that. :-))
*Why this issue is a problem:
This site has been around a long time and wasn't designed for this behavior. It's probably not going to go well.
(edited to add new findings)
I have developed a web application that makes ajax requests to a web service on a server in a different domain from the server that hosts the web app.
I have configured the web service to do a pre-flight check to set the necessary headers to allow a cross domain request.
In the web app I am using a JQuery client to access the web service. I have set the properties on the Jquery command to allow cross domain access.
$.support.cors = true;
In Chrome this all works fine. In IE9, however the cross domain behavior is only partially successful. All get requests work. But post requests with a content-type of application/json fail because IE9 refuses to make post requests with any content-type except text/html. IE9 switches the content-type on the request and the request fails on the server with a 400 bad request.
I had read that with IE10 the cross domain request would work as in Chrome. But after just testing this, I find that IE10 has the same behavior as IE9. The browser will not set the content-type to application/json. So post requests fail.
Does anyone know whether it is possible in IE10 to do cross domain post requests with other content-types than text/html. This makes writing web apps that do anything more than display data extremely difficult.
Are there other settings I need to make on the Jquery request? Or in the service pre-flight?
What does your $.ajax() call look like? You could try adding data: 'json' to your JQuery call in order to force the data type to be json. You also shouldn't need to set $.support.cors = true;, JQuery should figure this out for you (but its ok to leave it in for now).
I do have the content type param set data: 'json'.
Chrome honors this but IE switches to text/html. I had read that this was a know issue in IE9 and below but that IE10 would be using the same ajax implementation as Chrome, but this is apparently not the case.
I am trying to make cross-domain requests with Safari on Windows. My Safari version is 5.1.2.
This is a classical question. I read in many places that Chrome and Safari allows cross domain requests as long as Server responds with the followin header in the response
Access-Control-Allow-Origin: *
I have read this post.
How to allow cross-domain requests in Safari?
and many others on the stackoverflow site too.
However, none of them answers my question.
I am having problems with Chrome AND Safari doing cross-domain AJAX requests even though I am sending the necessary header back from the server.
I finally ran Chrome with "--disable-web-security". Then it worked.
My questions:
1) What do I do with Safari? Do I use a similar command line argument?
2) More importantly, can I someone please tell me whether cross-domain functionality is allowed in Chrome and Safari by default as long as server responds with the header or do I have to make sure that
a) server responds with a header
AND
b) browser is started with a proper argument.
I found the problem. Reading more about CORS helped html5rocks.com/en/tutorials/cors. I realized that my requests were triggering preflight requests (OPTIONS) and the server was not set up to handle these requests properly. The reason it was causing preflight requests was because I was using JQuery and it was adding a custom header into my requests. I modified my code to prevent addition of this extra header and my requests no longer needed preflight requests. Now I do not have to disable web security and it works fine.
I'm trying to read documentation and I must confess it is not an easy reading. I have no problem (after adding Access-Control-Allow-Origin header) to read responseText, but fail to get response header anywhere except Firefox.
So, my question is what is the right way to get response header, using cross-domain ajax?
I've tried to use (Access-Control-Expose-Headers), but, again, failed to read header.
So the way it should work is that you specify the headers you want the client to have access to in the Access-Control-Expose-Headers header. For example, if your server sets a Foo response header, and you want the client to be able to read it, your server should also send the following header:
Access-Control-Expose-Headers: Foo
On the client side, you can read all the response headers by calling xhr.getAllResponseHeaders(). This returns the response headers as a string, which you can then parse into an object using the following code: https://gist.github.com/706839
That is an explanation of how things should work. However, note that there is a bug in older browsers where the response headers can't be read on the client. See here for more details: CORS xmlhttprequest HEAD method
I had same problem, and found answer on Chromium mailing list that this is fixed in webkit, and it will be implemented in crhomium ~19.
I will try to find topic and update my answer.
I've started to add HTTP support to a custom C# non-webserver application which seems to work fine from Firefox/IE/Chrome when typing in the URL directly to the browser - where I can see a returned text string in the page from my application.
The problem is when I try do the same from a HTTPRequest in JavaScript on a web page I don't get a response with Chrome or Firefox (It's fine in IE) - rather I get a status of zero from the HTTPRequest object. I can however see that my application from its debug output received the request from the browser and provided the response so the browser must not be like the response I send in this case with the exception of IE being less picky.
I've swapped between trying different POST and GET requests to no avail - eg:
request.open('GET', url, true);
request.onreadystatechange = mycallback;
//request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
request.send(null); //tried '' as well and other data with a POST
My simplest server reply I have tried is:
HTTP/1.1 200 OK\r\n
Content-Length: 20\r\n
Content-Type: text/plain\r\n
\r\n
...........
I have tried 1.0 instead of 1.1, different headers such as Connection: Close, Accept-ranges and other random stuff as I tried to mimic other such responses I looked at with Wireshark.
Obviously it must be something simple but the magic combination eludes me!
Many thanks in advance.
And on that note I have answered my own question it was the cross domain security feature.
Which I have now fixed by adding the extra response header:
"Access-Control-Allow-Origin: *"
Hopefully that is useful for someone else in the future!