NEST JS API已被CORS策略Next JS Frontend阻止

Question

我正在为我的项目使用以下技术

• 后端/API： nest JS（在Localhost端口上运行：3001）
• 前端： Next JS（在Localhost端口上运行：3000）
• <强>数据库： mongodb
• 反向代理服务器： nginx
• 和docker

当我使用“ docker -compose up -d”后端正常运行，并且此“ Localhost：3001”的所有API URL都可以正常工作

，在前端，该站点正在正确加载，并且所有API数据都显示。但是，在这样的控制台和弹出窗口中显示了一个

错误：单击此处 错误图像2：单击此处

文本中的错误： 在弹出窗口中：

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)

在控制台中：

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.

我从docker image和服务名称中加载它时从前端称为“ http：// dev：3001”是开发人员。

这是Docker-Compose文件：

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

我还使用了nginx进行反向代理。这是nginx default.conf文件：

// 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/(?<section>.*) {
        rewrite ^/dev/(.*)$ /$1 break;
        proxy_pass http://dev;
    }
}

而且在前端，我已经使用了.env，这就是：

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

请建议我一个解决方案。我的网站在那个烦人的网络错误问题方面正常工作。