CORS pre-flight comes back with Access-Control-Allow-Origin:*, browser still fails request

Question

Triggering an AJAX GET to http://qualifiedlocalhost:8888/resource.json kicks off the expected CORS pre-flight, which looks like it comes back correctly:

Pre-flight OPTIONS request

Request URL:http://qualifiedlocalhost:8888/resource.json Request Method:OPTIONS Status Code:200 OK 

Request Headers

Accept:*/* Accept-Encoding:gzip,deflate,sdch Accept-Language:en-US,en;q=0.8 Access-Control-Request-Headers:accept, origin, x-requested-with Access-Control-Request-Method:GET Cache-Control:no-cache Connection:keep-alive Host:qualifiedlocalhost:8888 Origin:http://localhost:9000 Pragma:no-cache Referer:http://localhost:9000/ User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.71 Safari/537.36 

Response Headers

Access-Control-Allow-Headers:Content-Type, X-Requested-With Access-Control-Allow-Methods:GET,PUT,POST,DELETE Access-Control-Allow-Origin:* Connection:keep-alive Content-Length:2 Content-Type:text/plain Date:Thu, 01 Aug 2013 19:57:43 GMT Set-Cookie:connect.sid=s%3AEpPytDm3Dk3H9V4J9y6_y-Nq.Rs572s475TpGhCP%2FK%2B2maKV6zYD%2FUg425zPDKHwoQ6s; Path=/; HttpOnly X-Powered-By:Express 

Looking good?

So it should work, right?

But the subsequent request still fails with the error XMLHttpRequest cannot load http://qualifiedlocalhost:8888/resource.json. Origin http://localhost:9000 is not allowed by Access-Control-Allow-Origin.

True request

Request URL:http://qualifiedlocalhost:8888/resource.json 

Request Headers

Accept:application/json, text/plain, */* Cache-Control:no-cache Origin:http://localhost:9000 Pragma:no-cache Referer:http://localhost:9000/ User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.71 Safari/537.36 X-Requested-With:XMLHttpRequest 

Help!

Maybe it's staring right in front of me. But, any ideas? Just in case it's relevant... I'm using an AngularJS $resource and talking to a CompoundJS server.

Answer 1

change your Access-Control-Allow-Methods: 'GET, POST' to 'GET, POST, PUT, DELETE'

before:

   app.use(function(req, res, next) {         res.setHeader('Access-Control-Allow-Origin', '*');         res.setHeader('Access-Control-Allow-Methods', 'GET, POST');         res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, Authorization');         next();     }); 

After:

app.use(function(req, res, next) {     res.setHeader('Access-Control-Allow-Origin', '*');     res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT ,DELETE');     res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, Authorization');     next(); });