调用AWS API Gateway返回Undefined问题求助

核心问题大概率是你对API返回的数据结构判断错误，别直接硬取data.body，先通过调试确认实际返回结构：

第一步：先打印完整返回数据，明确结构 #

修改你的JavaScript代码，新增一行打印语句，查看浏览器控制台里的真实返回内容：

<script>
        fetch("https://myapi/get")
        .then(response => response.json())
        .then(data => {
        console.log(data); // 新增该行，在浏览器控制台查看完整返回结构
        document.getElementById("website-counter").innerHTML = data.body
        });
</script>

打开浏览器开发者工具（按F12）切换到「Console」标签，刷新页面就能看到完整的返回JSON，比如可能是{ views: 123 }或{ Item: { count: 456 } }，这时候你就知道该取哪个字段，而不是盲目用data.body。

常见错误场景及修正 #

场景1：API Gateway使用Lambda代理集成 #

如果你的API是Lambda代理集成，Lambda的返回格式通常是这样：

// Lambda函数内的返回代码示例
return {
  statusCode: 200,
  headers: {
    "Access-Control-Allow-Origin": "*"
  },
  body: JSON.stringify({ views: 100 }) // 实际数据转成JSON字符串
};

此时API Gateway会自动解析body字段的JSON字符串，前端fetch拿到的data就是{ views: 100 }，你应该写data.views而非data.body——这时候data.body自然是undefined。

场景2：Lambda直接返回原始数据（非代理集成） #

如果是自定义集成，Lambda直接返回DynamoDB查询结果，比如：

// Lambda直接返回DynamoDB的Item
return { views: 100 };

API Gateway返回的data就是这个对象，你需要取对应字段（比如data.views），同样不存在data.body字段。

特殊情况：返回的body是未解析的JSON字符串 #

如果AWS控制台调用API时，返回结构是类似这样的：

{
  "body": "{\"views\":123}"
}

那前端需要先解析body字段的JSON字符串，代码要改成：

document.getElementById("website-counter").innerHTML = JSON.parse(data.body).views

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