如何通过API Gateway获取AWS Lambda响应数据？前端Fetch请求异常

核心问题：no-cors模式限制了响应读取 #

当你在fetch中设置mode: "no-cors"时，浏览器会将响应标记为不透明响应（opaque response）——即使网络面板能看到服务器返回了内容，JavaScript也无法访问响应体，这是同源策略下的安全限制，这种模式仅适用于不需要读取响应的场景（比如加载跨域图片）。

解决步骤 #

1. 移除mode: "no-cors"，配置CORS支持

要读取Lambda返回的响应，必须让服务器（Lambda对应的API Gateway或Lambda URL）返回正确的CORS响应头，允许前端域名的请求。

• 如果用API Gateway：
  在API Gateway的对应资源上开启CORS配置，设置：

  • Access-Control-Allow-Origin：指定你的前端域名（比如https://your-frontend.com），开发环境可临时用*
  • Access-Control-Allow-Methods：包含POST
  • Access-Control-Allow-Headers：包含Content-Type

• 如果用Lambda URL：
  在Lambda控制台的URL配置中，设置CORS规则：

  • 允许的源：你的前端域名或*
  • 允许的方法：POST
  • 允许的头：Content-Type

2. 确保Lambda返回正确的响应格式

调整Lambda的handler，返回带CORS头的响应（如果网关/URL没自动配置的话，手动添加更稳妥）：

exports.handler = async (event) => {
  return {
    statusCode: 200,
    headers: {
      "Access-Control-Allow-Origin": "*", // 生产环境替换为实际前端域名
      "Content-Type": "application/json"
    },
    body: JSON.stringify(["apple", "banana", "cherry"]) // 你的目标数组
  };
};

3. 修改前端fetch请求

去掉mode: "no-cors"，正常发送请求：

fetch('https://your-lambda-or-api-url', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  // 如果需要发送请求体，保留这行；不需要就删掉
  body: JSON.stringify({ someData: "value" })
})
.then(response => response.json())
.then(data => console.log("返回的数组：", data))
.catch(error => console.error("请求出错：", error));

这样调整后，前端就能正常读取Lambda返回的数组了。

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