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