Docker化React+Node.js微服务应用出现CORS失败问题求助

开发者阿泽

2026-7-17

Docker Compose容器化后CORS错误排查方案

问题背景

开发了包含6个Node.js微服务和React前端的应用，本地终端运行正常，但用Docker Compose容器化后，前端通过fetch调用后端（示例地址：http://localhost:4500/credits/purchaseCredits/${credits}）时触发CORS失败错误。所有服务处于同一Docker网络，微服务已配置app.use(cors())，Dockerfile也暴露了对应端口。

排查与修复步骤

1. 修正Dockerfile环境变量格式

Dockerfile中环境变量赋值存在多余空格，会导致变量值包含空格字符，可能引发端口监听异常：

# 错误写法（等号前后有空格）
ENV PUR_CREDITS_SERVER_PORT = 4500
# 正确写法（移除等号前后空格）
ENV PUR_CREDITS_SERVER_PORT=4500

所有微服务的Dockerfile都需要修正此格式问题，确保环境变量值准确。

2. 优化CORS配置以支持自定义请求头

默认app.use(cors())虽允许所有来源，但当请求携带Authorization这类自定义头时，需明确配置CORS规则：
修改微服务中的CORS配置：

// 替换原有的app.use(cors())
const corsOptions = {
  origin: "http://localhost:3000", // 指定前端运行地址，提升安全性
  credentials: true,
  allowedHeaders: ["Authorization", "Content-Type", "Accept"]
};
app.use(cors(corsOptions));

此配置可确保预检请求（OPTIONS）被正确响应，携带自定义头的请求不会被浏览器拦截。

3. 验证服务状态与网络连通性

查看微服务日志：运行docker-compose logs purchase-credits，确认日志中显示服务正常启动并监听指定端口（如> Purchase Credits Server started on port 4500）。
测试主机到容器的连通性：在主机终端执行curl http://localhost:4500/credits/purchaseCredits/10，检查是否能收到正常响应，排除端口映射故障。