datmt

Recently I return to work on my extension that allow people to save pages to a remote site and also highlight and comment on the page they save (sounds cool?).

When saving a particular page to my server (using fetch/jQuery post), I got this error message:

The error reads like this:

Access to fetch at 'https://openexl.com/api/fr/save-page' from origin 'https://stackoverflow.com' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

What the extension tried to do was to save a stackoverflow.com page to my server at openexl.com.

We go a CORS error.

Understanding the error

At first, I didn’t read the error message but tried to search for every possible solution online to inject into my Nginx server. After hours of searching, no solution works.

Then I came across this comment on stackoverflow:

Things start to become clear to me. As I looked closers to the preflight request initiated by Chrome, it requested two headers: authorization and content-type. However, in the response headers, the field access-control-allow-headers doesn’t contain such those two.

How to fix CORS error on Nginx

With a clear understanding of the error, the fix came pretty simple. In the server block of my website. I set this:

    location / {
        try_files $uri $uri/ /index.php?$args;
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, HEAD, PUT, PATCH';

        add_header 'Access-Control-Allow-Headers' 'x-requested-with';

        if ($request_method = 'OPTIONS') {


            #...
            add_header 'Access-Control-Allow-Headers' '*';
        }
    }

Now, when Chrome send a preflight request, it knows that all request headers are allowed.

Sure enough, on the next request, I got no CORS error.

Conclusion

Obviously, you can limit the allowed headers to what you need (not setting a wildcard like I did). CORS errors don’t limit just to these headers. You may got different errors but the tip is look exact at the error message an accommodate to the browser’s requests.