React前端调用AWS Lambda函数遭遇CORS问题求助

以下是针对该CORS问题的具体排查和解决步骤：

• 确认API Gateway CORS配置的完整性

  • 确保在你调用的具体资源和POST方法上启用CORS，而非仅做全局配置。同时检查OPTIONS方法（浏览器预检请求专用）是否配置了正确的CORS规则，建议直接给OPTIONS方法配置Mock集成，返回包含CORS头的固定响应，无需触发Lambda。
  • 检查配置中的Allowed Headers是否覆盖前端实际发送的所有请求头（比如自定义头、Authorization等），且Lambda返回的Access-Control-Allow-Headers要与这里保持一致。
  • 如果前端请求携带凭证（如Cookie），Access-Control-Allow-Origin不能设为*，必须指定前端具体域名，同时要在Lambda和API Gateway配置中添加Access-Control-Allow-Credentials: true头。

• 确保Lambda所有场景都返回CORS头
  当前代码仅在成功返回200时携带CORS头，若Lambda执行出错（如抛出异常、返回5xx状态码），浏览器会因缺少CORS头触发错误。需保证无论成功或失败，都返回包含CORS头的响应，示例代码：

  try {
      // 业务逻辑代码
      return {
          statusCode: 200,
          body: JSON.stringify({ message: response.choices[0].message.content }),
          headers: {
              "Access-Control-Allow-Headers": "Content-Type",
              "Access-Control-Allow-Origin": "*",
              "Access-Control-Allow-Methods": "POST"
          },
      };
  } catch (error) {
      return {
          statusCode: 500,
          body: JSON.stringify({ error: error.message }),
          headers: {
              "Access-Control-Allow-Headers": "Content-Type",
              "Access-Control-Allow-Origin": "*",
              "Access-Control-Allow-Methods": "POST"
          },
      };
  }
  

• 验证API Gateway部署状态
  修改API Gateway的CORS配置后，必须重新部署到对应的阶段（如dev、prod），否则新配置不会生效，这是很多人容易忽略的关键步骤。

• 检查前端请求与配置匹配度

  • 确认前端请求使用POST方法，与Access-Control-Allow-Methods配置一致。
  • 若前端发送的是复杂请求（如Content-Type为application/json），需确保预检OPTIONS请求能得到正确响应，可通过浏览器Network面板查看OPTIONS请求的响应头是否包含CORS相关字段。

• 排查实际响应头
  打开浏览器开发者工具Network标签，查看目标请求的Response Headers，确认是否存在正确的CORS头。如果没有，说明要么Lambda未返回头，要么API Gateway的集成配置覆盖了这些头，需检查API Gateway的集成响应头映射规则。

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