React调用AWS Lambda报Credential is missing错误的解决方法

React页面代码 #

import React, {useState} from 'react';
import { Link } from 'react-router-dom';
import {LambdaClient, InvokeCommand, LogType} from "@aws-sdk/client-lambda"; // ES Modules import
const { fromTemporaryCredentials } = require("@aws-sdk/credential-providers");


const FooterOne = ({ footerLight, style, footerGradient }) => {

  const handleSubmit = async (event) => {
    event.preventDefault();

    const credentials = await fromTemporaryCredentials({
      params: {
        RoleArn: "arn:aws:lambda:us-east-1:123456789:function:email-submit",
      },
      clientConfig: {
        region: 'us-west-2',
      },
    })();

    try {
      const client = new LambdaClient({
        region: 'us-west-2',
        credentials,
      });

      const command = new InvokeCommand({
        FunctionName: "email-submit",
        Payload: JSON.stringify("payload"),
        LogType: LogType.Tail,
      });

      const { Payload, LogResult } = await client.send(command);
      const result = Buffer.from(Payload).toString();
      const logs = Buffer.from(LogResult, "base64").toString();
      return { logs, result };
    } catch (error) {
      console.error('Error invoking function:', error);
      // Handle errors as needed
    }
  };

  return (
      <>
        <form onSubmit={handleSubmit}>
          <input
              type='text'
              placeholder='Enter your email'
              name='email'
              required=''
              autoComplete='off'
          />
          <input
              type='submit'
              value='Subscribe'
              data-wait='Please wait...'
          />
        </form>
      </>
  );
};

export default FooterOne;

AWS Lambda代码 #

export const handler = async (event) => {
  // TODO implement
  const response = {
    statusCode: 200,
    body: JSON.stringify('Hello from Lambda!'),
  };
  return response;
};

错误信息 #

Uncaught (in promise) Error: Credential is missing
    at SignatureV4.credentialProvider (runtimeConfig.browser.js:22:1)
    at SignatureV4.signRequest (SignatureV4.js:103:1)
    at SignatureV4.sign (SignatureV4.js:58:1)
    at awsAuthMiddleware.js:24:1
    at async retryMiddleware.js:27:1
    at async loggerMiddleware.js:3:1
    at async fromTemporaryCredentials.js:20:1
    at async handleSubmit (FooterOne.js:12:1)

解决方案 #

核心问题分析 #

出现该错误的主要原因：

• 错误使用Lambda函数ARN作为RoleArn，实际需要的是具备Lambda调用权限的IAM角色ARN
• 浏览器环境无法直接使用fromTemporaryCredentials获取凭证，因为浏览器没有AWS默认凭证链，且直接暴露凭证存在安全风险

具体解决步骤 #

1. 修正RoleArn为IAM角色ARN
   你当前填写的RoleArn是Lambda函数的ARN，而fromTemporaryCredentials要求传入的是IAM角色的ARN，格式为arn:aws:iam::123456789:role/YourRoleName。请创建或选择一个拥有lambda:InvokeFunction权限的IAM角色，替换掉代码中错误的ARN。

2. 采用API Gateway作为中间层（推荐生产环境使用）
   直接在前端处理AWS凭证存在安全隐患，且浏览器环境不支持AWS SDK的凭证链机制。建议通过API Gateway封装Lambda：

   • 在AWS控制台创建API Gateway，将你的email-submitLambda设为集成后端
   • 前端表单提交时，直接调用API Gateway的HTTP端点，无需处理任何AWS凭证
   • 这种方式既规避了凭证问题，又提升了整体安全性

3. 修正凭证获取代码（仅测试场景使用）
   若必须在前端直接调用Lambda，需使用Cognito身份池提供基础凭证，同时修正代码写法：

   // 引入Cognito身份池凭证提供者
   const { fromCognitoIdentityPool } = require("@aws-sdk/credential-providers");
   
   // 正确获取临时凭证，无需await和额外调用()
   const credentials = fromTemporaryCredentials({
     params: {
       RoleArn: "arn:aws:iam::123456789:role/YourValidIAMRole", // 替换为正确的IAM角色ARN
     },
     clientConfig: {
       region: 'us-west-2',
     },
     // 基础凭证来源：Cognito身份池
     masterCredentials: fromCognitoIdentityPool({
       clientConfig: { region: 'us-west-2' },
       identityPoolId: 'us-west-2:your-cognito-identity-pool-id', // 替换为你的Cognito身份池ID
     })
   });
   
   // 创建LambdaClient时直接传入credentials
   const client = new LambdaClient({
     region: 'us-west-2',
     credentials,
   });
   

   注意：该方式仅适合测试场景，生产环境不建议直接在前端暴露AWS相关身份信息。

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