CORS issue with react nodejs app

General Discussions
,
1

Hi all. I am not sure this is the right place to ask the question or not as this is my first time.
I have been stuck on a CORS issue for over 2 days and it’s really frustrating.
I am using docker-compose.

version: "3.8"
services:
  web:
    container_name: eco-frontend
    build: ./eco-things-frontend
    ports:
      - 80:80
  api:
    container_name: eco-backend
    build: ./eco-things-backend
    ports:
      - 3000:3000
    links:
      - db  
    environment:
      MONGO_INITDB_DATABASE: ecothings 
    depends_on:
      - db
    volumes:
      - ./db-data/mongo/:/data/db
    networks:
      - node-network
  db:
    container_name: mongo-container
    restart: always
    image: mongo:4.0-xenial
    ports:
      - "27017:27017"
    volumes:
      - dbdata6:/data/db
    networks:
      - node-network  
volumes:
  dbdata6:
networks:
  node-network:
    driver: bridge

this is my docker-compose file. my backend is running on 3000 and frontend is running on 80. I am using nginx for the frontend also.
It’s working fine on my local machine(M1 pro).
But, on the server it’s giving me error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/api/lighting/lighting. (Reason: CORS request did not succeed). Status code: (null)

This is my dockerfile for the backend

#Stage 1
FROM node:16-alpine as build-step
RUN mkdir -p /usr/app
WORKDIR /usr/app
COPY package.*json /usr/app/
RUN npm install
COPY . /usr/app/
EXPOSE 3000
CMD [ "npm", "start" ]

I was digging around and found out maybe it can be achieved by extra_hosts but I am not sure how as I am a newbie to docker and don’t know how docker networking works.
I am using cors origin * in my code and I have also whitelisted http://localhost:3000 in my config file in the nodejs. Besides, it’s working fine on local so I guess it’s not the code issue.

Any help from you guys is appreciated.
Thank you so much in advance.

2

CORS is a browser mechanism it has nothing to do with docker, since you are able to make a request from your browser that reaches your web-server then your docker config is fine.
I don’t work with Node but my guess is that you need to whitelist the hosts you use in your Node app “localhost”.
I guess this question belongs to a Node forum my friend.

3

As @marcoreissa wrote the issue can’t be directly caused by Docker, so there is not much we can tell by checking the compose file, especially not the Dockerfile. It is still good that you shared it, but in this case the real question is what happens in the browser and how you configured the cross origin policies.

extra_hosts would not help at all. That is just adding new hosts to the `/etc/hosts in the container. It doesn’t affect the browser.

Unfortunately I my frontend experience is prety outdated and even when I worked with frontend and wasn’t an expert, so I believe marcoreissa is right and a forum related to frontend would be a better place to your question. However, you mentioned everything worked locally without containers. If you can tell us what you did differently, maybe we can tell you why that mattered. If you used the same applications, same ports (if that matters), same hostnames, everything should have worked the same way outside and inside containers.