I'm trying to upload files to a service on a different domain using CORS, but they keep failing due to the origin being denied. As far as I can see the correct headers are being used to allow this.

Javascript request:

  var xhr = new XMLHttpRequest();
  xhr.open('POST', "", true);                                                                                                                            
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onreadystatechange = function () {
    if (this.status == 200 && this.readyState == 4) {
      console.log('response: ' + this.responseText);
    }
  };

  xhr.send();

Response from the preflight OPTIONS request:

Access-Control-Allow-Headers:Origin, Authorization, Content-Type
Access-Control-Allow-Methods:POST, OPTIONS
Access-Control-Allow-Origin:*
Content-Length:0
Content-Type:application/json
Date:Mon, 19 Nov 2012 23:30:21 GMT

Headers for POST request:

Cache-Control:no-cache
Content-Type:application/json
Origin:
Pragma:no-cache
Referer:
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_0) AppleWebKit/537.19 (KHTML, like     Gecko) Chrome/25.0.1325.0 Safari/537.19

Which results in the error:

XMLHttpRequest cannot load . Origin  is not allowed by Access-Control-Allow-Origin.

I'm trying to upload files to a service on a different domain using CORS, but they keep failing due to the origin being denied. As far as I can see the correct headers are being used to allow this.

Javascript request:

  var xhr = new XMLHttpRequest();
  xhr.open('POST', "https://files.example.", true);                                                                                                                            
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onreadystatechange = function () {
    if (this.status == 200 && this.readyState == 4) {
      console.log('response: ' + this.responseText);
    }
  };

  xhr.send();

Response from the preflight OPTIONS request:

Access-Control-Allow-Headers:Origin, Authorization, Content-Type
Access-Control-Allow-Methods:POST, OPTIONS
Access-Control-Allow-Origin:*
Content-Length:0
Content-Type:application/json
Date:Mon, 19 Nov 2012 23:30:21 GMT

Headers for POST request:

Cache-Control:no-cache
Content-Type:application/json
Origin:https://www.example.
Pragma:no-cache
Referer:https://www.example.
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_0) AppleWebKit/537.19 (KHTML, like     Gecko) Chrome/25.0.1325.0 Safari/537.19

Which results in the error:

XMLHttpRequest cannot load https://files.example.. Origin https://www.example. is not allowed by Access-Control-Allow-Origin.

• javascript
• ajax
• cors

• 1 Did u got solution for this i am also facing similar problem stackoverflow./questions/15094620/… – P Srinivas Goud Commented Feb 27, 2013 at 5:14
• 1 Is this request credentialed? If so, the Access-Control-Allow-Origin needs to match the Origin (can't use wildcard). – maxbeatty Commented Apr 1, 2013 at 19:47

4 Answers 4

Unfortunately, POSTing to a domain other than your page's elicits CORS. That also includes different subdomains, ports and protocol (http/https).

Preflight is done when the request is "not simple", meaning, a content-type header set to something other than "text/plain". Your "application/json" makes browsers get scared into preflighting.

If those 50-200 ms are important to you, then you can rewrite your web service to understand the "simple" content type. If not, then you should make your web service throw back HTTP status 204 (no content) when it is tasked with OPTIONS (http method).

When dealing with a wcf:

WebOperationContext.Current.OutgoingResponse.StatusCode = System.Net.HttpStatusCode.NoContent;

The subdomains are different. As far as CORS is concerned the subdomain, protocol and port have to be identical in the Origin and the Access-Control-Allow-Origin.

In your example it looks like the origin is: https://www.example. and the Access-Control-Allow-Origin is: https://files.example.

Try adding Cache-Control and Pragma to the list of allowed headers in the preflight. The full header should look like this:

Access-Control-Allow-Headers: Cache-Control, Pragma, Origin, Authorization, Content-Type

It's little late, but looking at your info it shows the pre-flight CORS check works OK, it's just the actual (2nd) CORS request where the response gets blocked by the browser.

It's a pity you didn't include the response for the actual (2nd) CORS request because that might have contained the clue for the response rejection. My suspicion is that although the pre-flight response correctly contains the header:

Access-Control-Allow-Origin:*

... your actual (2nd) response might not have contained that header, in which case the browser correctly rejects the response. If my assumption is true, the solution would be to just include this header also in the actual (non pre-flight) response.