ReactJS+FastAPI+AWS部署后遇CORS及502 Bad Gateway错误求助

核心问题说明 #

你遇到的CORS报错是次生问题，根源是请求返回了502 Bad Gateway——后端服务根本没正常响应，自然无法返回CORS所需的响应头。先解决502问题，CORS问题大概率会随之消失。

一、优先排查502 Bad Gateway问题 #

本地运行正常，部署到AWS App Runner后出问题，重点检查以下几点：

• 检查App Runner服务状态与日志：进入App Runner控制台，查看「日志」标签的启动日志，确认FastAPI是否成功启动（比如是否有Uvicorn running on ...的日志）。如果启动失败，根据日志提示修复（比如依赖缺失、端口冲突）。
• 修正请求的Host头：从捕获的请求头看，Host: https://private-backend-url.awsapprunner.com格式错误！Host头应该是不带https://的纯域名：private-backend-url.awsapprunner.com。检查React的fetch URL是否有多余字符，或尝试直接在Postman中发送POST请求测试后端是否可访问。
• 验证App Runner端口配置：FastAPI默认使用8000端口，确认App Runner「服务配置」中的端口设置与FastAPI启动端口一致。
• 测试后端单独可用性：直接在浏览器/Postman中调用https://private-backend-url.awsapprunner.com/test（携带正确的JSON请求体），如果仍返回502，说明后端服务在App Runner上未正常运行，需排查部署包或启动命令。

二、CORS配置的补充验证 #

等502问题解决后，再确认CORS配置是否生效：

• 临时测试通配符配置：将origins改为["*"]（生产环境禁用），测试是否能正常跨域，排除域名拼写错误问题。
• 检查CORS响应头：在FastAPI中添加一个测试接口，返回请求头信息，确认响应中是否包含Access-Control-Allow-Origin等CORS相关头。
• 清空浏览器缓存：Amplify部署后可能存在缓存，强制刷新页面（Ctrl+Shift+R）或清空缓存后再测试。

三、React请求代码优化 #

结合FastAPI的allow_credentials=True配置，补充credentials参数，并完善错误处理：

try {
  const response = await fetch(
    'https://private-backend-url.awsapprunner.com/test',
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        ...newMessage,
        file: docName,
      }),
      credentials: 'include', // 对应FastAPI的allow_credentials=True
    }
  );

  if (!response.ok) {
    throw new Error(`请求失败，状态码: ${response.status}`);
  }
  const data = await response.json();
  // 后续业务逻辑
} catch (error) {
  console.error('API调用出错:', error);
}

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