CORS: preflight passes, main request completes w/200, but browser still has Origin error CORS: preflight passes, main request completes w/200, but browser still has Origin error google-chrome google-chrome

CORS: preflight passes, main request completes w/200, but browser still has Origin error


Troubleshooting CORS-Related Problems

  • If you are trying to reproduce the problem, and you're not seeing a request/response, it is possible that your browser has cached an earlier failed preflight request attempt. Clearing your browser's cache may also clear the preflight cache...

https://developers.google.com/storage/docs/cross-origin

I tested the following configuration on test-cors.org and it appears to work. Just remember to clear your cache every now and then while you are troubleshooting.

var allowedHost = {    // this is the origin that test-cors.org uses    'http://client.cors-api.appspot.com': true};var allowCrossDomain = function(req, res, next) {    if (!req.headers.origin || allowedHost[req.headers.origin]) {        res.header('Access-Control-Allow-Credentials', true);        res.header('Access-Control-Allow-Origin', req.headers.origin)        res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');        res.header('Access-Control-Allow-Headers', 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version');        if (req.method == 'OPTIONS') res.send(200);        else next();    }    else {        res.send(403, {            auth: false        });    }}

Good luck!


So it turns out that because I had both nginx and express set up to respond with headers to the options request, it was somehow combining the Access-Control-Allow-Origin header value into "", "". I don't know if it read that as an array or what.

Still pretty baffled because 1) Why did the request make it past nginx? and 2) Why did the browser proceed with the POST if the OPTIONS headers were messed up?

Oh well, the lesson, as always -- Don't Repeat Yourself.