如何在React表单提交时通过AWS SDK调用AWS Lambda？

1. 配置AWS SDK客户端 #

首先在React组件中初始化LambdaClient，传入IAM用户的凭证和Lambda所在的区域：

import { LambdaClient, InvokeCommand } from "@aws-sdk/client-lambda";

// 初始化Lambda客户端
const lambdaClient = new LambdaClient({
  region: "你的Lambda部署区域（如us-east-1）",
  credentials: {
    accessKeyId: "你的IAM用户Access Key ID",
    secretAccessKey: "你的IAM用户Secret Access Key"
  }
});

2. 编写表单提交处理逻辑 #

在表单的提交事件中收集数据，构造调用参数并触发Lambda：

import { useState } from "react";

function FormComponent() {
  const [formData, setFormData] = useState({
    name: "",
    phone: ""
    // 按需添加更多表单字段
  });

  // 处理输入值变化
  const handleInputChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  // 处理表单提交
  const handleSubmit = async (e) => {
    e.preventDefault();
    
    try {
      // 构造Lambda调用参数
      const invokeParams = {
        FunctionName: "你的Lambda函数名称",
        Payload: JSON.stringify(formData) // 将表单数据转为JSON字符串
      };

      // 执行Lambda调用
      const command = new InvokeCommand(invokeParams);
      const lambdaResponse = await lambdaClient.send(command);

      // 解析Lambda返回结果
      const result = JSON.parse(Buffer.from(lambdaResponse.Payload).toString());
      console.log("Lambda处理结果:", result);
      // 这里可添加提交成功后的交互逻辑，比如弹窗提示
    } catch (error) {
      console.error("Lambda调用失败:", error);
      // 处理错误场景，比如显示错误提示
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleInputChange}
        placeholder="姓名"
        required
      />
      <input
        type="tel"
        name="phone"
        value={formData.phone}
        onChange={handleInputChange}
        placeholder="手机号"
        required
      />
      <button type="submit">提交表单</button>
    </form>
  );
}

export default FormComponent;

3. 适配Lambda Handler的输入格式 #

确保你的Lambda handler能正确解析前端传入的Payload，以下是Node.js环境的handler示例：

exports.handler = async (event) => {
  // 直接调用时，event就是前端传入的Payload解析后的对象
  const receivedFormData = event;
  
  // 编写表单数据处理逻辑，比如存储到数据库、触发通知等
  console.log("收到表单数据:", receivedFormData);

  // 返回处理结果给前端
  return {
    statusCode: 200,
    body: JSON.stringify({
      message: "表单数据已成功处理",
      receivedData: receivedFormData
    })
  };
};

重要注意事项 #

• 安全风险提示：前端直接暴露IAM用户凭证存在极大安全隐患，恶意用户可利用凭证滥用AWS资源。建议优先使用Amazon Cognito身份池生成临时凭证，或通过API Gateway作为中间层调用Lambda（API Gateway可配置IAM/Cognito授权）。
• 权限验证：确认你的IAM用户已被授予lambda:InvokeFunction权限，且权限策略明确指定了目标Lambda函数的ARN。
• 区域一致性：Lambda客户端配置的区域必须与Lambda函数部署的区域完全一致，否则会出现调用失败。

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