Nest Js Api has been blocked by CORS policy Next JS Frontend which is running by Docker

Question

I am using the following techs for my project

Backend / API : Nest JS ( Running on port localhost:3001 )
Frontend: Next JS ( Running on port localhost:3000 )
Database: MongoDB
Reverse Proxy Server: Nginx
and Docker

When I am using "docker-compose up -d" the Backend is running properly as well as all the API URLs are working fine by this " localhost:3001 "

Also, in the Frontend, the site is loading properly and also all the API data is showing. But, an error is showing in the console and popup like this screenshot

Error Image 1: click here Error Image 2: click here

Error in text: In popup:

Unhandled Runtime Error
Error: Network Error

Call Stack
createError
node_modules/axios/lib/core/createError.js (16:0)
XMLHttpRequest.handleError
/_next/static/development/pages/Index.js (16144:14)

In Console:

Access to XMLHttpRequest at 'http://dev:3001/news?page=1&limit=3' from origin 'http://localhost:3000' 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.

I have called the API from the frontend as "http://dev:3001" as I am loading it from docker image and the service name is dev.

Here is the docker-compose file:

version: "3.9"
services:
  dev:
    container_name: nest-backend
    image: nest-backend:1.0.0
    build:
      context: ./backend
      target: development
      dockerfile: ./Dockerfile
    expose:
      - 3001
    ports:
      - "3001:3001"
    links:
      - mongo
    volumes:
      - ./backend:/backend/app
      - /backend/app/node_modules
    restart: unless-stopped
    command: npm run start:dev
    networks:
      - app-network
  app:
    image: bjithp-next
    build: frontend
    expose:
      - 3000
    ports:
      - 3000:3000
    depends_on:
      - dev
    volumes:
      - ./frontend:/app
      - /app/node_modules
      - /app/.next
    networks:
      - app-network
  mongo:
    image: mongo
    # environment:
    #   - MONGO_INITDB_ROOT_USERNAME=root
    #   - MONGO_INITDB_ROOT_PASSWORD=1234
    ports:
      - "27037:27017"
    volumes:
      - mongodb_data_container:/data/db
    networks:
      - app-network
  nginx:
    build:
      context: ./nginx
      dockerfile: Dockerfile
    ports:
      - "80:80"
    restart: always
    depends_on:
      - app
      - dev
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
    networks:
      - app-network
volumes:
  mongodb_data_container:
  mongodb-data:
    name: mongodb-data
networks:
  app-network:
    driver: bridge

I have also used nginx for reverse proxy. Here is the nginx default.conf file:

// nginx.conf

upstream dev {
    servdever dev:3001;
}

upstream client {
    server app:3000;
}

server {
    listen 80;

    server_name localhost:3000;
    access_log /path/to/access/log/access.log;
    error_log /path/to/error/log/error.log;

    location / {
        proxy_pass http://app;
    }

    location ~ /dev/(?.*) {
        rewrite ^/dev/(.*)$ /$1 break;
        proxy_pass http://dev;
    }
}

And also in the frontend, I have used .env, which is this:

DEFAULT_PORT=3000
BASE_API_URL=http://dev:3001
NODE_ENV=development
HOST=http://localhost
PRODUCTION_IMAGE_PORT=443
BASE_IMAGE_URL=http://localhost:3001
HIRE_US_PAGE=http://103.197.206.56:3000
BLOG_SHARE_URL_HOST=http://bjitgroup.com

Please suggest me a solution. My site is working fine with that annoying network-error problem.

Nest Js Api has been blocked by CORS policy Next JS Frontend which is running by Docker

0 Answers