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?

Answer 1

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.

Answer 2

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).