MERN应用多Access-Control-Allow-Origin头CORS错误解决问询

问题根源 #

你当前的后端代码存在重复的CORS配置，同时可能Nginx也添加了CORS响应头，导致浏览器收到多个Access-Control-Allow-Origin头，触发CORS错误：

• 同时使用了cors中间件和手动设置Access-Control-Allow-Origin的自定义中间件
• 单独为每个API端点的OPTIONS请求手动设置CORS头，而cors中间件本身就会自动处理预检请求
• 如果Nginx后端配置中也添加了CORS相关add_header指令，会进一步加重头重复问题

解决方案 #

1. 简化后端CORS配置

删除所有重复的CORS设置，仅保留cors中间件即可，它会自动处理所有CORS逻辑（包括预检OPTIONS请求）：

// 只保留这一行CORS配置，删除其他所有手动设置头和OPTIONS路由的代码
app.use(cors({ 
  origin: "https://skytrust.ca",
  allowedHeaders: ["Content-Type", "Authorization"],
  methods: ["GET", "POST", "PUT", "DELETE"]
}));

注意：去掉origin末尾的斜杠，避免匹配问题

2. 清理Nginx后端配置

打开你的Nginx后端配置文件，检查是否存在类似以下的CORS头设置，如果有则删除：

add_header Access-Control-Allow-Origin https://skytrust.ca;
add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE";
add_header Access-Control-Allow-Headers "Content-Type, Authorization";

确保Nginx仅做反向代理，不处理CORS逻辑，把CORS控制完全交给后端。

3. 重启服务验证

• 重启Node.js后端服务，确保新配置生效
• 重启Nginx服务：sudo systemctl restart nginx
• 发起前端请求，通过浏览器开发者工具的"网络"面板查看响应头，确认只有一个Access-Control-Allow-Origin头

内容的提问来源于stack exchange，提问作者Udit