Search code examples
reactjsdockerexpresspm2

Getting "Reason: CORS request did not succeed" while making request from a React app to an Express server that is up with pm2


So I've created a MERN stack web application and I'm using docker. one image for my react app and one image for the express app. my database is still in the production stage and it's on Mlab. It may be not relevant but I want to provide full information to get my exact answer. here is my docker config files:

backend Dockerfile:

FROM node

WORKDIR /app

COPY package.json .
COPY package-lock.json .

RUN npm install pm2 -g
RUN npm install
RUN npm audit fix

COPY . .
COPY .env .


EXPOSE 2424

CMD ["npm","run","server"]

Front Dockerfile:

FROM node as builder

RUN mkdir -p /app
RUN chmod -R 777 /app

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

COPY package.json .
RUN npm install

COPY . .
COPY .env .

FROM nginx:stable-alpine
COPY --from=builder /app/build /usr/share/nginx/html 
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

and my docker-compose file:

version: "3"
networks:
  now-net:
    driver: bridge
services:
  nowfront:
    container_name: frontapp
    build:
      context: ./front
      dockerfile: ./Docker/Dockerfile
    volumes:
      - "./front:/app"
      - "/app/node_modules"
    ports:
      - 60:80
    stdin_open: true
    tty: true
    restart: always
    environment:
      - CHOKIDAR_USEPOLLING=true
    networks:
      - now-net
  backend:
    container_name: backapp
    restart: always
    stdin_open: true
    tty: true
    build:
    context: ./backend
    dockerfile: Dockerfile
    volumes:
       - "./backend:/app"
       - "/app/node_modules"
    ports:
      - 40:2424
    networks:
      - now-net

my server is listening to port 40 and front is listening to port 60. they're both on the same server. for example HTTP://222.222.22.22:40 and HTTP://222.222.22.22:60 And I'm using pm2 to run the server using "pm2 start app.js". in my express app, I've allowed all origins using cors npm module:

app.use(cors({ origin: "http://222.222.22.22:60", credentials: true }));
app.use(fileupload({ useTempFiles: true }));
app.use(express.json({ limit: "200mb" }));
app.use(express.urlencoded({ extended: true, limit: "200mb" }));

Now before using pm2, everything was working fine. after using pm2, I get this error every time I make a request to my backend. for example I get this error in Firefox dev tools:

"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://222.222.22.22:40/api/instruments/get-all-instruments-public. (Reason: CORS request did not succeed)"

and in the Network tab: Firefox network tab

I send this specific request like this:

export const getAllInstrumentsPublic = () => (dispatch) => {
 axios
  .get(`${uri.BaseURI}/api/instruments/get-all-instruments-public`)
  .then((result) => {
     const instruments = result.data;
     dispatch({
        type: types.GET_ALL_INSTRUMENTS,
        payload: instruments,
     });
})
  .catch((err) => {
     dispatch({
       type: types.GET_ERROR,
       payload: err.response ? err.response : {},
     });
  });
};

Now, the question is simple. What am I doing wrong?


Solution

  • So I changed the Dockerfile and package.json to run the server with nodemon again, and it works fine now. It is weird. because using pm2 is so simple and straightforward and I want to use pm2 in production so the server could be reliable. If anyone can suggest a complete solution to my problem, I'd appreciate it.