Recommended solution for AJAX, CORS, Chrome & HTTP error codes (401,403,404,500)

Question

Background

(If you are familiar with CORS, you might skip to the Question at the end)

CORS [1] is a solution to a

Answer 1

I spend a couple of hours today hunting for the answer to this, while developing a web app on Chrome. Some others have written fairly detailed analyses of this situation.

There were two potential issues:

1. It could be that Chrome was doing a preflight and was getting a non-200 or a non-CORS response in response

   • Specs about Preflights (When they Occur)

2. For some reason my non-200 (error) status codes were not getting the headers attached. As I found out in this post, this second reason was the issue. Essentially, NGINX only adds headers on successful responses by default. To get my error responses through CORS, it sufficed to change

add_header 'Access-Control-Allow-Origin' '*';

to

add_header 'Access-Control-Allow-Origin' '*' always;

As the article notes, you may also have to add always to 'Access-Control-Allow-Credentials' and 'Access-Control-Allow-Headers'. After doing this, all error codes also went through without CORS issues. It may be that the program you are using for API serving does the same. Hope this helps and saves someone some time!