Amazon Elastic Beanstalk与Netlify React应用的CORS错误求助

问题现象 #

部署后触发CORS拦截错误：

Access to XMLHttpRequest at 'https://4bto.sitename.com/api/dashboard/login' from origin 'https://app.sitename.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

已尝试的CORS配置 #

1. 指定源的cors中间件配置 #

app.use(
  cors({
    origin: "https://app.sitename.com",
    methods: ["GET", "POST", "PUT", "DELETE"],
  })
);

2. 手动处理OPTIONS预检请求 #

app.options("*", (req, res) => {
  res.header(
    "Access-Control-Allow-Origin",
    "https://app.sitename.com"
  );
  res.header("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE");
  res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
  res.header("Access-Control-Allow-Credentials", true);
  res.sendStatus(204); // Send a 204 No Content response
});

3. 通配符源配置 #

app.use(
  cors({
    origin: "*",
    methods: ["GET", "POST", "PUT", "DELETE"],
  })
);

以上三种配置均未解决跨域问题。

环境信息 #

• 后端：Amazon Elastic Beanstalk托管，使用Amazon Certificate Manager的SSL证书，自定义域名https://4bto.sitename.com/
• 前端：Netlify部署的React应用，子域名https://app.sitename.com，使用同一SSL证书

排查方向与解决方案 #

1. 检查Elastic Beanstalk代理层配置 #

Elastic Beanstalk默认用Nginx做反向代理，可能拦截OPTIONS请求或未传递CORS头。需在代理层直接配置CORS：
在项目根目录创建.ebextensions文件夹，添加01-cors.config文件：

files:
  /etc/nginx/conf.d/cors.conf:
    content: |
      add_header Access-Control-Allow-Origin "https://app.sitename.com" always;
      add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
      add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
      
      if ($request_method = 'OPTIONS') {
        return 204;
      }
container_commands:
  01_reload_nginx:
    command: "service nginx reload"

该配置让Nginx直接处理OPTIONS预检请求，避免请求到达Node.js后端前被拦截。

2. 确认Node.js中间件加载顺序 #

必须保证cors中间件/OPTIONS处理代码在所有路由定义前加载，否则路由会先匹配请求，导致CORS头无法添加：

• 错误顺序：先定义路由，后加载cors
• 正确顺序：先加载cors，再定义路由

3. 验证请求是否到达后端 #

用Postman直接发送OPTIONS请求到https://4bto.sitename.com/api/dashboard/login，检查响应头：

• 若无Access-Control-Allow-Origin字段：请求未到达Node.js后端，问题出在Elastic Beanstalk代理层
• 若有该字段：前端请求可能存在其他冲突（比如通配符*与Access-Control-Allow-Credentials: true不能同时使用，需注意此配置冲突）

4. 检查SSL与域名绑定 #

确认Elastic Beanstalk负载均衡器已正确绑定SSL证书，域名解析指向正确的负载均衡器端点。SSL握手失败也会导致预检请求被拦截。

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