QA环境下React+Nginx+Express架构的CORS问题排查求助

核心原因分析 #

405 Not Allowed 通常是因为Nginx默认拦截了OPTIONS预检请求，没有转发给Express处理，或者Express的CORS配置未正确生效。以下是针对性的修复步骤：

1. 修正Nginx配置，确保OPTIONS请求被正确处理 #

在API的反向代理location块中，直接处理OPTIONS请求并返回204（无需转发到Express），同时确保CORS头在所有响应中正确添加：

location /api {
    # 直接处理OPTIONS预检请求
    if ($request_method = OPTIONS) {
        add_header Access-Control-Allow-Origin "$http_origin";
        add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
        add_header Access-Control-Allow-Headers "Authorization, Content-Type, X-Requested-With";
        add_header Access-Control-Max-Age 86400; # 缓存预检结果24小时
        add_header Content-Length 0;
        add_header Content-Type text/plain;
        return 204;
    }

    # 原有反向代理配置
    proxy_pass http://localhost:3001; # 替换为你的Express实际监听端口
    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;

    # 确保CORS头在所有响应中返回（包括非OPTIONS请求）
    add_header Access-Control-Allow-Origin "$http_origin" always;
    add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
    add_header Access-Control-Allow-Headers "Authorization, Content-Type, X-Requested-With" always;
}

注意：always关键字必须添加，否则Nginx在返回错误响应时不会携带CORS头，导致前端仍报错。

2. 验证Express的CORS配置（如果保留Express处理） #

如果选择在Express层处理CORS，确保中间件在所有路由之前挂载，且配置正确：

const express = require('express');
const cors = require('cors');
const app = express();

const corsOptions = {
    origin: ['http://localhost:3000', 'https://qa.example.com', 'https://example.com'],
    credentials: true, // 若前端需要携带Cookie或认证头，必须开启
    allowedHeaders: ['Authorization', 'Content-Type', 'X-Requested-With'],
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']
};
// 必须在路由挂载前使用CORS中间件
app.use(cors(corsOptions));

// 挂载你的API路由
app.use('/auth', require('./routes/auth'));

app.listen(3001, () => console.log('API server running on port 3001'));

⚠️ 不要手动编写OPTIONS请求的处理逻辑，cors中间件已自动处理，手动处理会导致冲突。

3. 排查代理地址与端口正确性 #

• 确认Express服务确实在监听Nginx配置的proxy_pass端口（如3001），可通过netstat -tulpn | grep node命令验证。
• 确保proxy_pass使用本地地址（如http://localhost:3001）而非公网地址，避免额外的网络跳转问题。

4. 优化方案：统一在Nginx层处理CORS #

为了减少Express的负担并避免配置冲突，推荐直接在Nginx层统一处理所有CORS逻辑，此时可以移除Express中的cors中间件。这种方式性能更优，且配置更集中。

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