NextJS通过Axios调用API Gateway触发Lambda接口时报CORS错误

核心报错原因 #

报错信息Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response指向两个明确问题：

1. 前端请求错误携带了仅允许出现在服务端响应中的CORS协议头，触发预检请求校验失败
2. Serverless + API Gateway的CORS配置存在缺口，且控制台手动修改的配置无法持久化、也未覆盖Lambda代理集成场景的响应头要求

注：Postman不受浏览器同源策略限制，请求成功不代表CORS配置符合浏览器要求。

修复步骤 #

1. 修正前端Axios请求代码 #

Access-Control-Allow-Origin是服务端返回响应时携带的头，客户端发起请求时禁止主动携带该头，直接删除对应配置即可：

const handleSignUp = async (email, password) => {
  const response = await Axios.post(
    `${API}/signup`,
    { email, password },
    {
      headers: {
        "Content-Type": "application/json"
        // 移除 "Access-Control-Allow-Origin": "*" 这行错误配置
      },
    }
  );
  console.log(response);
};

2. 修正serverless.yml配置，移除控制台手动修改的规则 #

控制台手动开启的CORS配置会在下次执行serverless deploy时被覆盖，直接在yml文件中声明全量CORS规则：

functions:
  # 替换为你自己的注册接口Lambda配置
  signup:
    handler: <你的函数handler路径>
    events:
      - http:
          path: signup
          method: post
          cors:
            # 本地开发填本地前端地址，线上替换为正式前端域名，需要带cookie时禁止配置为*
            origin: "http://localhost:3000"
            headers:
              - Content-Type
              - X-Amz-Date
              - Authorization
              - X-Api-Key
              - X-Amz-Security-Token
            allowCredentials: false

配置完成后删除API Gateway控制台中之前手动添加的CORS规则，执行serverless deploy重新部署。

3. 给Lambda响应添加标准CORS头 #

如果你用的是API Gateway Lambda代理集成模式（Serverless框架默认开启），API Gateway不会自动给非200响应、自定义错误响应添加CORS头，需要在Lambda的返回结果中显式携带：

// Lambda函数返回示例
return {
  statusCode: 200,
  headers: {
    // 和yml中配置的origin保持一致
    "Access-Control-Allow-Origin": "http://localhost:3000",
    "Access-Control-Allow-Headers": "Content-Type",
    "Access-Control-Allow-Methods": "POST,OPTIONS"
  },
  body: JSON.stringify({
    // 你的接口返回数据
  })
}

提示：接口返回4xx、5xx错误时也要携带上述CORS头，否则浏览器依然会报跨域错误，不会返回实际错误信息。

验证方式 #

部署完成后清空浏览器网络请求缓存，重新在NextJS应用中发起请求即可。配置正确的情况下，浏览器先发的OPTIONS预检请求会返回200状态码，且响应头中包含匹配的Access-Control-Allow-*规则，随后的POST请求会正常执行。

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