前端调用AWS Lambda Function URL获取DynamoDB数据失败求助

按以下顺序排查修复，大概率解决你的问题：

1. 修正Fetch请求的URL格式 #

你的前端fetch URL未添加https://前缀，浏览器会将其识别为当前页面的相对路径发起请求，必然无法找到目标资源。修改代码如下：

fetch('https://xyz.lambda-url.us-east-1.on.aws/') 

2. 配置Lambda Function URL的CORS规则 #

浏览器的同源策略会拦截跨域请求，而Lambda Function URL默认未开启CORS，直接前端调用会被浏览器拦截。操作步骤：

• 登录AWS控制台，定位到你的Lambda函数
• 进入「配置」→「函数URL」→「编辑」
• 在「跨域资源共享(CORS)」区域，勾选「启用CORS」
• 测试阶段可将「允许的来源」设为*，上线后替换为你的作品集域名；「允许的方法」选择GET，「允许的头」设为*，最后保存配置

3. 匹配返回数据的键名大小写 #

你的Lambda返回的键是Count（大写C），但前端代码中取值用的是data.count（小写c），即使请求成功也无法获取到数据。二选一修改即可：

• 改Lambda返回代码：

return {'count': new_count}  # 将Count改为小写count

• 或改前端取值代码：

document.getElementById('visitor_counter').innerText = data.Count

4. 增加错误处理便于调试 #

给fetch请求添加catch块，能直接在浏览器控制台看到具体错误信息，方便后续排查：

fetch('https://xyz.lambda-url.us-east-1.on.aws/') 
.then(response => {
  if (!response.ok) {
    throw new Error(`HTTP错误！状态码: ${response.status}`);
  }
  return response.json();
})
.then((data) => {
  document.getElementById('visitor_counter').innerText = data.count
})
.catch(error => {
  console.error('请求失败:', error);
});

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