React中通过Axios获取Lambda返回值为null的问题排查

我搭建了如下架构的应用：User <-> API Gateway <-> Lambda <-> DynamoDB，希望通过API获取Lambda的响应以在网页展示条目列表。

React组件代码 #

async handleSubmit(event) {
    event.preventDefault();
    const res = await axios.post('https://***.execute-api.us-east-1.amazonaws.com/default/functionName', {})
    console.log(res)
}

该请求返回null，Payload中无内容。

Lambda函数代码 #

client = boto3.client('dynamodb', region_name='us-east-1')
data = client.scan(TableName='myTable');
response = {
    'statusCode': 200,
    'body': json.dumps(data),
    'headers': {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*'
    },
}
return response;

Lambda函数测试响应如下：

{
  "statusCode": 200,
  "body": "{\"Items\": [{\"date\": {\"N\": \"123\"}, \"message\": {\"S\": \"msg\"}}....], \"Count\": .....",
  "headers": {
    "Content-Type": "application/json",
    "Access-Control-Allow-Origin": "*"
  }
}

Lambda中能正常获取DynamoDB的条目列表JSON，但React中返回null，请问原因是什么？遗漏了什么？

核心问题：API Gateway集成配置缺失 #

Lambda本地测试正常但前端请求返回null，大概率是API Gateway未正确配置与Lambda的集成响应映射，导致返回的JSON未被正确传递到前端。

具体修复步骤 #

• 开启Lambda代理集成
  进入AWS控制台的API Gateway，找到对应API和POST方法：

  1. 切换到「集成请求」标签，确认已关联目标Lambda函数；
  2. 开启Lambda proxy integration（Lambda代理集成），该模式会自动转发Lambda返回的完整响应（包括statusCode、headers、body），无需手动配置映射模板；
  3. 开启后重新部署API，再测试前端请求。

• 检查前端响应处理
  axios的响应数据存储在res.data中，当前代码仅打印res可能看不到实际内容，修改代码：

  console.log(res.data);
  

  同时查看浏览器Network标签，确认请求的实际响应内容，排查是API返回null还是前端处理问题。

• Lambda代码细节校验
  确保已导入json模块（代码中使用了json.dumps，若未导入会报错，但测试正常则可忽略）：

  import json
  import boto3
  

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