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:                         

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:      
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  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?

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

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
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 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?

• javascript
• jquery
• ajax
• cors

• What do the headers from the outgoing request look like? They should include an Origin: header. However, I believe the browser always appends it. – daxelrod Commented Sep 14, 2011 at 23:53
• Updated the question with the headers from the options request. – Alex Wayne Commented Sep 14, 2011 at 23:56

2 Answers 2

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

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