javascripttypescriptreact-nativenginxcors

CORS issue with NGinx and fetch react native


I'm facing a cors issue only with web browser when I want to implement a react native app. Alhough I've configured

Access-Control-Allow-Origin: *

I'm still getting a CORS error from the browser. Is there anything that I'm missing?

client:

return fetch(newURL, {
    method: "GET",
    credentials: 'include',
    headers: {
        'Authorization': 'Bearer ' + accessToken,
        'Content-Type': 'application/json'
    },
})

server nginx:

       location / {
            proxy_set_header X-Forwarded-Host $host;
            proxy_set_header X-Forwarded-Server $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            add_header 'allow' 'GET';
            add_header 'access-control-allow-origin' '*';
            add_header 'access-control-allow-credentials' 'true';
            add_header 'access-control-expose-headers' 'filename';

            proxy_pass http://127.0.0.1:9000/;
    }

}

interaction

enter image description here

enter image description here

enter image description here

The query is failing because of preflights with CORS. Here is the msg

Access to fetch at 'xxxx/access/verif?email=xxxx&v=0.1&1733744786626' from origin 'localhost:19006' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Any clue?

Thanks!


Solution

  • The problem was that because I'm using spring boot, OPTIONS http method was not handled properly. Additionally because I provide a Bearer, CORS restrictions don't support wildcard.

    Here is my Nginx working configuration, you might need to add some http methods according to your needs.

     location / {
                proxy_set_header X-Forwarded-Host $host;
                proxy_set_header X-Forwarded-Server $host;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    
                if ($request_method = OPTIONS) {
                   add_header Access-Control-Allow-Origin $http_origin ;
                   add_header Access-Control-Allow-Credentials 'true' ;
                   add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
                   add_header Access-Control-Allow-Headers 'content-type,authorization';
                   add_header Content-Type text/plain;
                   add_header Content-Length 0;
                   return 204;
                }
                add_header Access-Control-Allow-Origin $http_origin;
                add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
                add_header Access-Control-Allow-Credentials 'true' ;
                add_header Access-Control-Allow-Headers 'content-type,authorization';
    
    
                proxy_hide_header "X-Frame-Options";
    
                proxy_pass http://127.0.0.1:9000/;
        }