How do CORS and Access-Control-Allow-Headers work?

Question

I'm trying to make CORS request POST from domain.com to a.domain.com.

My javascript looks like this

$('#fileupload').fileupload({   xhrFields: {     withCredentials: true   },   dataType: 'json',   url: $('#fileupload').data('path'),   singleFileUploads: true,   add: function(e, data){     data.submit();   } }); 

At first I see the OPTIONS route being called like so:

Request URL: https://a.domain.com/some/route Request Method:OPTIONS Status Code:200 OK 

OPTIONS REQUEST:

Access-Control-Request-Headers:origin, content-type, accept Access-Control-Request-Method:POST Host:a.domain.com Origin:http://domain.com:3000 Referer:http://domain.com:3000/home 

OPTIONS RESPONSE

Access-Control-Allow-Credentials:true Access-Control-Allow-Methods:POST Access-Control-Allow-Origin:http://domain.com:3000 Connection:keep-alive Content-Length:0 Content-Type:text/html;charset=utf-8 

That request comes back with a 200 like stated. On my server, I have the same route with POST method and this is what I get in return after the OPTIONS

Request URL:https://a.domain.com/some/route 

POST REQUEST

Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryjwr5Pk7WBcfzMdbO Origin:http://domain.com:3000 Referer:http://domain.com:3000/home 

and the POST request gets canceled/fails.

My question is, do I need to have the access-control-allow-origin on the POST controller as well?

I have a cookie for authorization that has domain .domain.com that cookie got sent across once in a request and it's not being sent now. Any idea why that would happen?

Answer 1

Yes, you need to have the header Access-Control-Allow-Origin: http://domain.com:3000 or Access-Control-Allow-Origin: * on both the OPTIONS response and the POST response. You should include the header Access-Control-Allow-Credentials: true on the POST response as well.

Your OPTIONS response should also include the header Access-Control-Allow-Headers: origin, content-type, accept to match the requested header.