如何在React表单提交时调用AWS Lambda函数？

1. 清理冗余依赖，修复安全与版本冲突问题 #

• 移除v2版本的AWS SDK代码（const AWS = require('aws-sdk');及AWS.config.update），统一使用v3 SDK，避免版本冲突。
• 绝对禁止在前端代码中硬编码AWS密钥，这会直接导致密钥泄露。使用临时凭证时，RoleArn必须是IAM角色的ARN（而非Lambda函数ARN），且该IAM角色需具备调用目标Lambda函数的权限，同时前端需通过合法渠道（如Cognito身份池、后端签名）获取临时凭证。

2. 正确获取表单输入值 #

在提交逻辑中捕获用户输入的邮箱地址，作为参数传递给Lambda函数。

3. 修正临时凭证使用方式 #

fromTemporaryCredentials返回的是CredentialProvider实例，直接赋值给LambdaClient的credentials字段即可，无需额外调用。

4. 完善提交状态反馈 #

给用户展示加载中、成功、失败的状态提示，提升交互体验。

修正后的React组件代码 #

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { LambdaClient, InvokeCommand, LogType } from "@aws-sdk/client-lambda";
import { fromTemporaryCredentials } from "@aws-sdk/credential-providers";

const FooterOne = ({ footerLight, style, footerGradient }) => {
  const [email, setEmail] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitStatus, setSubmitStatus] = useState('');

  // 初始化Lambda客户端，使用临时凭证
  const lambdaClient = new LambdaClient({
    region: 'us-west-2',
    credentials: fromTemporaryCredentials({
      params: {
        RoleArn: "arn:aws:iam::123456789:role/YourLambdaInvocationRole", // 替换为你的IAM角色ARN
      },
      clientConfig: {
        region: 'us-west-2',
      },
    }),
  });

  const handleSubmit = async (event) => {
    event.preventDefault();
    setIsSubmitting(true);
    setSubmitStatus('');

    try {
      // 构造包含用户邮箱的请求参数
      const payload = JSON.stringify({ email });

      const command = new InvokeCommand({
        FunctionName: "email-submit", // 你的Lambda函数名称
        Payload: payload,
        LogType: LogType.Tail,
      });

      const { Payload, LogResult } = await lambdaClient.send(command);
      const result = JSON.parse(Buffer.from(Payload).toString());
      const logs = Buffer.from(LogResult, "base64").toString();

      console.log('Lambda调用结果:', result);
      console.log('Lambda执行日志:', logs);
      setSubmitStatus('订阅成功！');
    } catch (error) {
      console.error('Lambda调用失败:', error);
      setSubmitStatus('订阅失败，请稍后重试');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input
          type='email' // 改用email类型，符合输入语义
          placeholder='Enter your email'
          name='email'
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
          autoComplete='off'
          disabled={isSubmitting}
        />
        <input
          type='submit'
          value={isSubmitting ? 'Please wait...' : 'Subscribe'}
          disabled={isSubmitting}
        />
      </form>
      {submitStatus && <p>{submitStatus}</p>}
    </>
  );
};

export default FooterOne;

修正后的Lambda函数代码（支持邮箱处理） #

export const handler = async (event) => {
  try {
    // 解析前端传递的请求参数
    const { email } = JSON.parse(event);
    
    // 此处添加邮箱处理逻辑，例如存入数据库、发送确认邮件等
    console.log('收到订阅请求，邮箱地址:', email);

    return {
      statusCode: 200,
      body: JSON.stringify({ message: '订阅成功', email }),
    };
  } catch (error) {
    console.error('请求处理失败:', error);
    return {
      statusCode: 500,
      body: JSON.stringify({ message: '处理失败', error: error.message }),
    };
  }
};

关键注意事项 #

• IAM角色配置：确保指定的IAM角色拥有lambda:InvokeFunction权限，且信任关系允许获取临时凭证的实体（如Cognito身份池）调用AssumeRole接口。
• 前端访问权限：如果是浏览器环境直接调用Lambda，需配置Lambda资源策略允许前端域名访问；更安全的方式是通过API Gateway中转请求，避免直接暴露Lambda端点。
• 错误处理优化：可根据Lambda返回的状态码和响应内容，给用户提供更精准的错误提示。

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