Amplify部署React前端与Express后端时遭遇CORS跨域错误

1. 修正Express后端的CORS配置 #

你的代码中定义了corsOptions但未传入cors()中间件，且未明确指定允许的前端Origin（当开启credentials: true时，不能使用默认的通配符*）。修改后端代码如下：

import express from 'express'
import { generateUploadURL } from './s3.js'
import cors from "cors"

const app = express()

// 替换为你的前端Amplify域名（比如 https://xxx.amplifyapp.com）
const FRONTEND_ORIGIN = 'https://your-frontend-amplify-domain.amplifyapp.com';

const corsOptions = { 
  origin: FRONTEND_ORIGIN,
  credentials: true,
  optionSuccessStatus: 200
}

// 将配置传入cors中间件
app.use(cors(corsOptions));

app.get('/s3Url', async (req, res) => {
  const url = await generateUploadURL()
  res.send({url})
})

// 使用Amplify分配的端口，不要硬写8080
app.listen(process.env.PORT || 8080, () => {
  console.log(`listening on port ${process.env.PORT || 8080}`)
})

2. 检查Amplify部署的端口配置 #

Amplify部署后端服务时会动态分配端口，硬写8080可能导致服务无法正常启动。确保后端代码使用process.env.PORT获取Amplify分配的端口，如上述代码所示。

3. 验证后端响应头 #

部署后，使用curl命令测试后端的CORS响应头是否正确：

curl -H "Origin: https://your-frontend-amplify-domain.amplifyapp.com" -I https://your-backend-amplify-domain.com/s3Url

确认响应中包含以下头信息：

• Access-Control-Allow-Origin: https://your-frontend-amplify-domain.amplifyapp.com
• Access-Control-Allow-Credentials: true

4. 检查Amplify Hosting的后端部署配置 #

如果后端是通过Amplify Hosting部署的Express应用，确保amplify.yml配置正确，示例如下：

version: 1
backend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run build # 如果你有构建步骤，比如打包TypeScript
  artifacts:
    baseDirectory: . # 根据你的项目结构调整，比如dist/
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

5. 确认前端请求的后端URL正确 #

确保前端代码中<BACKEND_URL>替换为Amplify分配给后端的实际域名，没有拼写错误或遗漏路径。

内容的提问来源于stack exchange，提问作者002 DMAM Jigyasa Nagpal