React中Axios POST请求AWS HTTP API遇CORS跨域错误求助

问题背景 #

React应用通过Axios调用AWS HTTP API，GET请求正常，但POST请求触发CORS错误：

Access to XMLHttpRequest at 'my_endpoint' from origin 'http://localhost:3000' 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.

已配置HTTP API的OPTIONS路由、Lambda返回CORS头，且API Gateway中设置了允许所有源、方法和请求头，但问题仍存在。

排查与解决步骤 #

1. 移除手动创建的OPTIONS路由，依赖HTTP API自动CORS配置

AWS HTTP API的CORS配置会自动生成对应的OPTIONS路由并处理预检请求，手动添加的OPTIONS路由会和自动生成的规则冲突，导致预检响应头不生效。操作步骤：

• 登录AWS控制台，进入目标HTTP API的路由页面
• 删除手动创建的OPTIONS路由
• 重新确认CORS配置：允许的源设为http://localhost:3000（或生产环境域名），允许的方法包含POST和OPTIONS，允许的请求头包含Content-Type、Authorization等实际用到的头

2. 修正Lambda响应头的冲突规则

当设置Access-Control-Allow-Credentials: true时，Access-Control-Allow-Origin不能使用通配符*，浏览器会直接拒绝这种组合。调整Lambda的响应头：

// OPTIONS和POST请求的Lambda响应都需要返回这些头
{
  statusCode: 200,
  headers: {
    "Access-Control-Allow-Origin": "http://localhost:3000", // 替换为你的前端实际域名
    "Access-Control-Allow-Methods": "POST, OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type, Authorization",
    "Access-Control-Allow-Credentials": true
  },
  body: JSON.stringify({}) // OPTIONS请求可返回空body
}

注意：POST请求的Lambda响应也必须包含上述CORS头，不能仅在OPTIONS请求中返回。

3. 验证预检请求的实际响应头

打开浏览器开发者工具的「网络」面板，找到OPTIONS类型的预检请求，查看「响应头」：

• 如果没有看到Access-Control-Allow-Origin等配置的头，说明HTTP API的CORS配置未生效，需检查API Gateway的CORS设置是否保存成功
• 如果看到头但仍报错，检查是否存在头值不匹配的情况（比如源域名拼写错误）

4. 对齐Axios请求配置

• 如果Axios请求中使用了withCredentials: true，确保后端Access-Control-Allow-Credentials设为true，且源为具体域名
• 检查请求是否携带了未在Access-Control-Allow-Headers中声明的自定义头，如有需添加到允许列表

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