AWS部署React应用CORS跨域登录失败问题求助

1. 后端动态配置CORS Origin #

替换你当前的CORS配置，改成动态返回请求的Origin（而非通配符或固定域名），同时可按需添加安全校验：

app.use(
  cors({
    origin: function (origin, callback) {
      // 测试环境下允许所有合法请求源（非空Origin）
      if (!origin) return callback(null, true);
      // 可选：限制仅允许AWS预览域名（比如Amplify的*.amplifyapp.com）
      const awsPreviewDomainRegex = /\.amplifyapp\.com$/;
      if (awsPreviewDomainRegex.test(origin)) {
        return callback(null, origin);
      }
      return callback(new Error('Not allowed by CORS'));
    },
    methods: ["POST", "GET", "PUT", "DELETE"],
    credentials: true,
  })
);

原理：当请求携带Cookie时，Access-Control-Allow-Origin必须是具体的请求源域名，不能是通配符*。通过动态读取请求头里的Origin并返回，就能适配每次AWS部署后的新URL。

2. 确保前端请求携带Credentials #

不管用axios还是fetch，都要显式开启凭证携带：

Axios示例 #

// 全局配置
axios.defaults.withCredentials = true;

// 单个请求配置
axios.post('/api/login', loginData, {
  withCredentials: true
});

Fetch示例 #

fetch('/api/login', {
  method: 'POST',
  credentials: 'include', // 关键配置
  body: JSON.stringify(loginData),
  headers: {
    'Content-Type': 'application/json'
  }
});

3. 额外提示（针对AWS Amplify预览环境） #

如果使用AWS Amplify做自动部署预览，可在Amplify控制台的环境变量中注入API地址，确保前端始终指向正确的后端；但核心解决CORS问题的还是后端的动态Origin配置。

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