AWS CloudResumeChallenge访客计数器显示[object Object]求助

1. 解决"[object Object]"显示问题 #

这个问题本质是你把完整的API响应对象直接插入DOM，没提取具体计数值。检查scripts.js的fetch逻辑：

• 确保你先把响应解析成JSON，再取对应字段：

  // 错误写法（直接赋值响应对象）
  fetch('你的API地址')
    .then(res => document.getElementById('counter').textContent = res)
  
  // 正确写法（解析JSON后取计数字段）
  fetch('你的API地址')
    .then(res => res.json())
    .then(data => {
      // 替换成Lambda返回的实际字段名，比如data.count或data.visitCount
      document.getElementById('counter').textContent = data.count;
    })
  

• 对照Postman里的API响应，确认字段名完全一致（注意大小写，比如Count和count是两个不同字段）。

2. 修复元素重复渲染问题 #

重复渲染一般是脚本多次执行或渲染逻辑错误导致的，排查这几点：

• 检查index.html里的<script>标签，是不是被重复引用了（比如同时在<head>和<body>尾部加了引用）。
• 查看脚本里的事件绑定，比如DOMContentLoaded事件是不是被多次绑定——如果脚本被加载多次，每次都会触发一次请求和渲染。
• 确认渲染逻辑是替换内容而非追加：用element.textContent = 新内容，别用innerHTML += 新内容，后者会不断累加内容。

3. 额外验证项 #

虽然Postman测试正常，但可以再确认：

• 打开浏览器控制台的Network标签，查看API请求的响应是否是正确的JSON，有没有被CloudFront缓存了旧数据？可以临时禁用缓存测试。
• 检查Console标签有没有CORS相关报错——如果CORS配置有问题，浏览器会直接在这里提示，哪怕Lambda和SAM配置了策略，也可能因为CloudFront转发头的问题导致失效。

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