使用Nginx反向代理React应用时遭遇CORS跨域问题求助

问题根源 #

你的错误核心是当请求的credentials模式为include时，后端返回的Access-Control-Allow-Origin不能使用通配符*，必须指定具体的请求源（即https://ui.mydomain.com），同时后端必须返回Access-Control-Allow-Credentials: true响应头。从你提供的响应头可以看到，后端仅设置了Access-Control-Allow-Origin: *，且缺少Access-Control-Allow-Credentials头，这直接触发了浏览器的CORS拦截。

直接解决办法（后端修复） #

CORS规则由后端完全控制，这是最根本的解决方式：

Apache后端配置示例 #

因为你的后端使用Apache，修改其配置文件（如.htaccess或虚拟主机配置）：

1. 仅允许指定信任源（推荐）：

# 仅允许ui.mydomain.com的跨域请求
SetEnvIf Origin "^https://ui.mydomain.com$" ALLOWED_ORIGIN=$0
Header set Access-Control-Allow-Origin "%{ALLOWED_ORIGIN}e" env=ALLOWED_ORIGIN
Header set Access-Control-Allow-Credentials "true"
# 保留原有允许的方法和头配置
Header set Access-Control-Allow-Methods "POST, GET, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Referer, User-Agent"

2. 动态允许所有信任源（如果需要支持多个源）：

# 动态获取请求的Origin，仅允许HTTPS的可信域名（可根据需求调整正则）
SetEnvIf Origin "^https://.*\.mydomain\.com$" ALLOWED_ORIGIN=$0
Header set Access-Control-Allow-Origin "%{ALLOWED_ORIGIN}e" env=ALLOWED_ORIGIN
Header set Access-Control-Allow-Credentials "true"

临时绕过方案（前端/代理层，无需改后端） #

如果暂时无法修改后端配置，可以通过代理将跨域请求转为同域请求，避免浏览器触发CORS校验：

方案1：Webpack Dev Server代理 #

修改webpack.config.js的devServer配置，添加API代理规则：

output: {
  publicPath: '/' // 改为相对路径，适配代理
},
devServer: {
  port: 3000,
  historyApiFallback: true,
  proxy: {
    '/api': {
      target: 'https://backend.mydomain.com',
      changeOrigin: true,
      pathRewrite: { '^/api': '' }, // 去掉/api前缀转发到后端
      secure: true // 后端为HTTPS时需要开启
    }
  }
}

然后修改前端fetch代码，请求同域的代理路径（注意修正原代码的语法错误）：

const options = {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  credentials: 'include',
};
// 原代码的userResponse.Data.json()错误，应为userResponse.json()
const userResponse = await fetch('/api/user/details', options);
const user = await userResponse.json();

方案2：Nginx反向代理（适合开发/生产环境） #

在ui.mydomain.com的Nginx配置中添加API转发规则，将前端的API请求直接转发到后端：

server {
  server_name ui.mydomain.com;
  # 已有HTTPS配置（证书、listen 443等）...

  # 代理API请求到后端
  location /api/ {
    proxy_pass https://backend.mydomain.com/;
    proxy_set_header Host backend.mydomain.com;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }

  # 代理前端页面到Webpack Dev Server
  location / {
    proxy_pass http://localhost:3000/;
    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;
  }
}

同样修改前端fetch请求为/api/user/details即可。

更优实现方案 #

1. 生产环境：优先使用Nginx同域代理方案，避免前端直接跨域调用，既解决CORS问题，又能统一域名管理、隐藏后端真实地址，提升安全性。
2. 开发环境：使用Webpack Dev Server代理，无需修改后端配置，同时保持请求逻辑与生产环境一致。
3. 后端CORS最佳实践：
   • 永远不要使用*作为Access-Control-Allow-Origin，动态允许信任的具体域名。
   • 带凭证的请求必须返回Access-Control-Allow-Credentials: true。
   • 限制Access-Control-Allow-Methods和Access-Control-Allow-Headers为业务实际需要的范围，避免过度开放。

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