I'm trying to send a post request from a client-side javascript (fetch) to my server which uses Nginx as the web server. The client-side javascript runs on a different domain.

I'm having trouble configuring Nginx to reply with the proper headers, when I try the config below, I get a 405 Not Allowed on the preflight request:

location /cookie/ {

        root /myPlace;
        add_header Allow 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Origin' '$http_origin' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;

        index index.php;
}

When I try the configuration below, the preflight is successful and it contains all the headers needed for CORS, but the main request errors to MissingAllowOriginHeader the console error is the familiar No 'Access-Control-Allow-Origin' header is present on the requested resource.

Here is the config which results in the behavior described above:

location /cookie/ {

        root /myPlace;
        add_header Allow 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Origin' '$http_origin' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;

        if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain charset=UTF-8';
                add_header 'Content-Length' 0;
                add_header 'Access-Control-Allow-Origin' '$http_origin' always;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
                add_header 'Access-Control-Allow-headers' 'Content-Type' always;
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
                return 204;
        }

        index index.php;
}

The strange thing is that the main request in this case doesn't return any CORS headers, although the preflight has all the necessary headers and doesn't error out.

Any idea how can I get past these CORS errors

If it helps, this is the javascript code I use on the client-side:

let theData = {
    id: "123",
};

fetch("https://myServer.com/cookie/", {
        method: 'POST',
        mode: 'cors',
        cache: 'no-cache',
        headers: {
            'Content-Type': 'application/json'
        },
        redirect: 'follow',
        body: JSON.stringify(theData),
    });

Thank you