CORS issue with NGinx and fetch react native

Question

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

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!

And please quote the actual error message. So far we only know that you get a CORS error, but not even which one in particular. — C3roe
– C3roe, Commented Dec 9, 2024 at 13:11
This question is similar to: Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — user16540390
– user16540390, Commented Dec 9, 2024 at 13:13
I's edited with the difference highlighted, the difference is although the header returns Access-Control-Allow-Origin: * I'm getting a CORS error. Do I need to create a new post to not be voted negatively? ;) — art1go
– art1go, Commented Dec 9, 2024 at 13:26
No 'Access-Control-Allow-Origin' header is present on the requested resource is a CORS error message. What CORS error message do you get? — user16540390
– user16540390, Commented Dec 9, 2024 at 13:33

art1go · Accepted Answer · 2024-12-09 14:08:27Z

0

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/;
    }

answered Dec 9, 2024 at 14:08

art1go

931 gold badge1 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jub0bs Over a year ago

$request_method = OPTIONS is too strict: not all OPTIONS requests are CORS-preflight requests. You're going to trap all OPTIONS requests in the logic of your CORS middleware.

art1go Over a year ago

@jub0bs what do you suggest?

jub0bs Over a year ago

=> jub0bs.com/posts/2023-02-08-fearless-cors/…

art1go Over a year ago

ideally it should be handled by spring, I agree, but there is no much point as it is a react native app. Also, ios and android apps are not causing issue with CORS, it is only when we test though the web.

Collectives™ on Stack Overflow

CORS issue with NGinx and fetch react native

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related