服务器端配置Nginx解决Docker到Docker-Compose请求的CORS问题

我将前后端分离的应用部署到服务器，前端通过Dockerfile打包部署正常，后端通过Docker-Compose部署也无问题，但请求环节出现异常，推测是CORS问题。本地环境一切正常，但服务器上请求无法通过。

前端Dockerfile配置 #

#STAGE 1
FROM node:16-alpine as build
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm install --legacy-peer-deps
COPY . .
RUN npm run build --prod

#STAGE 2
FROM nginx:1.17.1-alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=build /usr/src/app/dist/ok-admin /usr/share/nginx/html

Nginx配置 #

events{}
http {
    include /etc/nginx/mime.types;
    server {
        listen 80;
        server_name ok-market.pp.ua;
        root /usr/share/nginx/html;
        index index.html;
        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

后端Docker-Compose配置 #

version: '3'
services:
  app:
    build:
      context: .
    ports:
      - "3000:3000"
    environment:
      - MONGODB_URI=mongodb://mongo:27017/market
    depends_on:
      - mongo
    networks:
      - backend
    command: ["sh", "-c", "sleep 10 && npm start"]

  mongo:
    image: mongo
    ports:
      - "27017:27017"
    networks:
      - backend

networks:
  backend:
    driver: bridge

后端CORS配置（index.ts） #

const corsOptions = {
    origin: 'http://ok-market.pp.ua'
};

app.use(cors(corsOptions));

请求失败截图 #

排查与解决步骤 #

1. 确认请求地址准确性
   检查前端请求后端的地址是否为http://ok-market.pp.ua:3000（后端映射了3000端口），本地环境可能用localhost:3000，服务器端必须对应域名加端口。

2. 验证CORS origin匹配

   • 浏览器请求的Origin头包含协议、域名、端口，需确保后端配置的origin与前端实际Origin完全一致（比如前端用HTTPS的话，origin也要改成https://ok-market.pp.ua）。
   • 可临时将origin设为*测试是否为CORS问题：

     const corsOptions = {
         origin: '*'
     };
     app.use(cors(corsOptions));
     

     测试有效后再改回精确匹配。

3. 用Nginx反向代理消除跨域
   更稳妥的方式是通过Nginx将后端接口代理到前端域名下，避免跨域：
   修改Nginx配置，添加接口代理规则：

   events{}
   http {
       include /etc/nginx/mime.types;
       server {
           listen 80;
           server_name ok-market.pp.ua;
           root /usr/share/nginx/html;
           index index.html;
   
           # 代理后端/api开头的请求到3000端口
           location /api {
               proxy_pass http://localhost:3000;
               proxy_set_header Host $host;
               proxy_set_header X-Real-IP $remote_addr;
               proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
               proxy_set_header X-Forwarded-Proto $scheme;
           }
   
           location / {
               try_files $uri $uri/ /index.html;
           }
       }
   }
   

   同时前端请求地址改为/api/xxx，无需携带域名和端口，彻底解决跨域问题。

4. 检查服务器端口与防火墙
   确认服务器3000端口已对外开放；若用Nginx代理，只需开放80端口即可。

5. 核查后端服务状态
   执行docker-compose logs app查看后端日志，确认服务是否正常启动、是否能连接MongoDB、是否接收到前端请求。

内容的提问来源于stack exchange，提问作者Микола Мозолюк