I have a react front end and nodejs backend. Front end runs on a nginx:stable (version 1.24.0) based docker container with 8080->80 port mapping. The back end runs on node:20 based container on port 8086
docker run -p8080:80 frontend:latest
docker run -p8086:8086 backend:latest
On my machine I open firefox and navigate to localhost:8080 and I'm served the landing page. Then I click login and a POST request is sent to the backend, I'm authenticated and I'm able to login. Everything is as expected.
But another developer built the images and ran them the exact same way, and he's getting CORS error when he tries to login:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8086/api/v1/users/signin. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 204.
Why would he be getting CORS if both the frontend and the backend are running on localhost? Why is he getting CORS and I'm not?
I tried enabling CORS in the nginx config file but he's still having the same issue
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Accept,Content-Type';
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
Thanks