Serverless Lambda与API Gateway的CORS问题解决方法

我刚搞定了一个和你完全一致的问题——在基于React、Serverless和Stripe API开发电商网站时，前端发起GET请求时遭遇了混淆性的CORS请求失败错误，一开始完全摸不着头脑，直到一步步排查才找到根源。

问题现象 #

前端React应用发起GET请求后，控制台弹出CORS请求失败的提示，但错误信息非常模糊，根本无法直接定位到问题本质，很容易让人误以为是API Gateway的CORS配置出了问题。

排查过程与根源 #

我一开始反复检查API Gateway的CORS配置（允许的Origin、HTTP方法、请求头等），确认所有配置都没问题。直到把目光转向后端的Lambda函数，才发现问题出在响应对象的构建上：

Lambda函数返回响应时，错误地直接将原始数据赋值给了body字段，也就是写了：

body: data

而正确的做法应该是将数据序列化为JSON字符串：

body: JSON.stringify(data)

因为API Gateway要求响应的body必须是格式合法的JSON字符串，如果直接传入原始对象，API Gateway在处理响应时会触发内部错误，而这个错误会被前端解读为CORS相关的失败，从而出现混淆性的错误提示。

解决方案 #

修改Lambda函数中的响应构建代码，确保body字段的值是经过JSON.stringify()处理后的字符串。举个完整的示例：

// 修正后的Lambda响应代码
exports.handler = async (event) => {
  // 假设这里通过Stripe API获取到了data数据
  const data = await fetchStripeData();
  
  return {
    statusCode: 200,
    headers: {
      "Access-Control-Allow-Origin": "*", // 根据你的需求配置具体Origin
      "Content-Type": "application/json"
    },
    body: JSON.stringify(data) // 关键：序列化数据为JSON字符串
  };
};

修改完成后重新部署Serverless服务，前端的CORS错误就会消失，请求能正常获取到数据了。

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