部署在AWS EC2的React/Node全栈应用仍遇CORS策略问题

核心问题分析 #

你的架构是Nginx反向代理到Node服务，Node同时提供React静态文件和API接口。出现CORS错误的主要原因可能是：

• 前端请求API的地址错误，触发跨域
• Node服务通过Nginx接收请求时，无法获取真实的请求Origin，导致CORS校验失败
• 代码中存在路径配置错误，可能影响静态文件或API路由的正常访问

解决方案 #

1. 修正前端API请求路径 #

确保前端代码中所有API请求使用相对路径，比如将http://localhost:5000/api/auth改为/api/auth。这样请求会直接发送到当前域名（http://13.200.107.25），由Nginx代理到Node服务，不会触发浏览器的跨域检查。

2. 修复Node服务中的路径错误 #

你的代码里_dirname的定义是错误的，这可能导致静态文件无法正确加载，间接引发异常：

// 错误写法
const _dirname = path.dirname("");
// 正确写法
const __dirname = path.dirname(require.main.filename);
// 或者使用ES模块兼容写法
const __dirname = path.resolve();

同时修正sendFile中的路径：

app.get('/*', (req, res) => {
  res.sendFile(
    path.join(__dirname, "../client/build/index.html"),
    (err) => {
      if(err) {
        res.status(500).send(err);
      }
    }
  )
})

3. 调整CORS配置以适配反向代理 #

因为Nginx作为反向代理，Node服务默认拿到的请求Host是localhost:5000，而非真实的客户端Origin。可以通过两种方式解决：

方式一：修改Node的CORS配置，允许正确的Origin并信任代理

const corsOptions = {
  origin: 'http://13.200.107.25',
  credentials: true, // 如果需要携带Cookie等凭证
  optionsSuccessStatus: 200
}
// 添加信任代理配置，让Express识别Nginx传递的真实IP和Origin
app.set('trust proxy', true);
app.use(cors(corsOptions));

方式二：在Nginx中直接处理CORS（推荐，减少Node层逻辑）

修改Nginx配置文件/etc/nginx/sites-available/default，添加CORS相关响应头：

server {
   listen 80 default_server;
   listen [::]:80 default_server;
    
   server_name _;

   # 处理CORS预检请求
   if ($request_method = OPTIONS) {
       add_header Access-Control-Allow-Origin http://13.200.107.25;
       add_header Access-Control-Allow-Methods GET, POST, PUT, DELETE, OPTIONS;
       add_header Access-Control-Allow-Headers Content-Type, Authorization;
       add_header Access-Control-Max-Age 3600;
       add_header Content-Length 0;
       add_header Content-Type text/plain;
       return 200;
   }

   # 为所有请求添加CORS头
   add_header Access-Control-Allow-Origin http://13.200.107.25 always;
   add_header Access-Control-Allow-Methods GET, POST, PUT, DELETE, OPTIONS always;
   add_header Access-Control-Allow-Headers Content-Type, Authorization always;
   
   location / {
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection upgrade;
        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;
        proxy_cache_bypass $http_upgrade;
    }
} 

修改后重启Nginx：

sudo systemctl restart nginx

4. 验证配置生效 #

• 重启Node服务：pm2 restart <你的服务名>
• 打开浏览器开发者工具，查看Network面板中API请求的响应头，确认Access-Control-Allow-Origin是否为http://13.200.107.25
• 如果仍有问题，检查浏览器控制台的具体CORS错误信息，明确是Origin不允许还是Headers不匹配

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