React调用API Gateway+Lambda接口返回422错误求助

问题场景 #

在React中编写POST请求调用基于Lambda的API Gateway RestApi时，收到错误：POST https://api_url/create-user 422 (Unprocessable Content) undefined，但Postman中能获取正确响应，React代码无法正常工作。

错误原因分析 #

1. mode: 'no-cors' 限制响应读取：no-cors模式下，浏览器会强制限制请求的响应内容无法被JavaScript读取，即使后端返回正确结果，前端也无法获取，同时可能导致请求格式被浏览器篡改。
2. 前端错误设置Access-Control-Allow-Origin请求头：该响应头是后端返回给浏览器用于跨域验证的，前端请求时不需要添加，反而可能干扰请求格式。
3. Fetch响应处理错误：Fetch API返回的response对象没有.data属性（这是Axios的用法），需要调用.json()方法解析响应体；同时代码中存在重复的then/catch链，会导致逻辑混乱。
4. 请求体可能无效：requestBody中的body_here是占位符，未替换为实际有效JSON结构，导致后端无法解析请求体返回422错误。

修复方案及代码示例 #

修复后的React代码 #

const [responseMessage, setResponseMessage] = useState('');

async function sendRequest() {
  try {
    // 替换为实际的请求体数据
    const requestBody = {
      username: 'test-user',
      email: 'test@example.com'
      // 其他需要的字段
    };

    const response = await fetch('api_url_here/create-user', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
        // 移除前端的Access-Control-Allow-Origin请求头
      },
      body: JSON.stringify(requestBody)
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const responseData = await response.json();
    console.log(responseData);
    setResponseMessage(JSON.stringify(responseData));
  } catch (error) {
    console.log(error);
    setResponseMessage('Error: ' + error.message);
  }
}

Lambda返回代码（优化后） #

return {
    "statusCode": self.status_code,
    "headers": {
        "Access-Control-Allow-Origin": "*",  # 确保跨域头正确返回
        "Content-Type": "application/json"   # 明确响应格式，避免解析歧义
    },
    "body": json.dumps(self.body)
}

额外检查点 #

• 确认api_url_here替换为实际的API Gateway地址，无拼写错误。
• 验证requestBody的结构和字段与后端Lambda期望的一致，避免参数缺失或格式错误。
• 检查API Gateway是否正确配置了POST方法的集成请求，确保请求体能正确传递到Lambda。

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