Cross Domain AJAX preflighting failing Origin check

Question

This doesn't seem to work:

$.ajax({
    url:      "http://localhost:3000/foo.json",
    data:     { foo: 'bar' },
    headers:  { 'HTTP_X_CUSTOMHEADER': 'foobar' },
    xhrFields: { withCredentials: true }
});

When I run it on jsfiddle, an OPTIONS request (according to the Chrome debug tools) fires off that looks like this:

Access-Control-Request-Headers: Origin, HTTP_X_CUSTOMHEADER, Accept
Access-Control-Request-Method:  GET
Origin:                         http://fiddle.jshell.net

And then (according to the Chrome debug tools) my local server returns the following headers:

(manually reformatted for readability)

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers:     HTTP_X_CUSTOMHEADER
Access-Control-Allow-Methods:     GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin:      http://fiddle.jshell.net
Access-Control-Max-Age:           10

Cache-Control:                    no-cache
Connection:                       Keep-Alive
Content-Length:                   1
Content-Type:                     text/html; charset=utf-8
Date:                             Wed, 14 Sep 2011 22:42:28 GMT
Server:                           WEBrick/1.3.1 (Ruby/1.8.7/2010-01-10)
X-Runtime:                        2

And then in the console I get an error message like this:

XMLHttpRequest cannot load http://localhost:3000/foo.json?foo=bar.
Origin http://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin.

But the Access-Control-Allow-Origin header appears identical to when my server responded with to the preflight request. So what piece am I missing here of this puzzle?

What do the headers from the outgoing request look like? They should include an [Origin:](https://developer.mozilla.org/en/HTTP_access_control) header. However, I believe the browser [always appends it](https://developer.mozilla.org/en/HTTP_access_control#Origin). — daxelrod, Sep 14 '11 at 23:53
Updated the question with the headers from the options request. — Alex Wayne, Sep 14 '11 at 23:56

score 4 · Accepted Answer · answered Sep 15 '11 at 17:16

4

OHHHHH, ok I figured this out, finally...

Apparently the preflight OPTIONS response headers arent the only place that needs them. You need to include those headers on the response for the actual content as well. I only had these headers coming down on the preflight, thinking that was the only "ticket" needed.

So I added the same headers to the GET request for the actual asset and everything works great now. I guess I missed that in the docs.

answered Sep 15 '11 at 17:16

Alex Wayne

178,991
47
309
337

2

Could you go into more detail? I'm stuck in CORS hell: http://stackoverflow.com/questions/13318436/https-access-control-allow-origin-not-working-no-matter-what-with-php-5-3-apac – Nov 10 '12 at 15:01
Can you help me with this http://stackoverflow.com/questions/41952995/response-status-is-0-in-jquery-ajax?noredirect=1#comment71099392_41952995?? – SSS Feb 01 '17 at 09:09

score 1 · Answer 2 · answered Sep 15 '11 at 15:11

1

You need to include Origin in the Access-Control-Allow-Headers section, since Origin is not considered a simple header (IMO, the spec should include Origin in the list of simple headers).

answered Sep 15 '11 at 15:11

monsur

45,581
16
101
95

I changed the OPTIONS response headers to include `Access-Control-Allow-Headers:HTTP_X_CUSTOMHEADER, Origin, Accept` but it didn't change anything. – Alex Wayne Sep 15 '11 at 16:52

Cross Domain AJAX preflighting failing Origin check

2 Answers2

Linked