React应用连接DynamoDBClient报‘Error: Credential is missing’问题

核心原因 #

你混淆了浏览器环境和Node.js环境的差异：

• 终端运行的.mjs文件是在Node.js环境执行，AWS SDK v3的凭证自动加载机制（读取~/.aws/credentials或环境变量）仅在Node环境生效。
• React应用运行在Chrome浏览器中，浏览器没有权限访问本地文件系统（比如~/.aws/credentials）或系统环境变量，因此无法自动获取凭证，导致报错“Credential is missing”。

可行解决方案 #

1. 使用AWS Amplify（官方推荐） #

Amplify是AWS专为前端应用打造的集成工具，可安全处理身份验证和AWS服务访问：

• 安装依赖：

  npm install aws-amplify @aws-amplify/ui-react
  

• 通过amplify init初始化项目，关联你的AWS账号，Amplify会自动生成并管理身份验证配置
• 修改DynamoDB调用代码：

  import { Amplify } from 'aws-amplify';
  import { DynamoDBClient, ExecuteStatementCommand } from '@aws-sdk/client-dynamodb';
  import { getCredentials } from '@aws-amplify/core';
  
  // 配置Amplify，参数可从Amplify初始化后的配置文件获取
  Amplify.configure({
    Auth: {
      region: 'us-west-2',
      userPoolId: '你的用户池ID',
      userPoolWebClientId: '你的客户端ID'
    }
  });
  
  function App() {
    async function loadFromCloud() {
      const credentials = await getCredentials();
      const dynamoDB = new DynamoDBClient({
        region: "us-west-2",
        credentials: credentials
      });
  
      const command = new ExecuteStatementCommand({
        Statement: `select * from TableX`
      });
      try {
        const data = await dynamoDB.send(command);
        console.log(data);
      } catch (error) {
        console.log(error);
      }
    }
  
    // 组件渲染逻辑...
  }
  

2. 搭建后端代理服务 #

在Node.js后端封装DynamoDB请求，前端通过HTTP接口调用后端，避免前端直接接触AWS凭证：

• 后端示例（基于Express）：

  // server.js
  import express from 'express';
  import { DynamoDBClient, ExecuteStatementCommand } from '@aws-sdk/client-dynamodb';
  
  const app = express();
  const dynamoDB = new DynamoDBClient({ region: "us-west-2" });
  
  app.get('/api/tablex', async (req, res) => {
    try {
      const command = new ExecuteStatementCommand({
        Statement: `select * from TableX`
      });
      const data = await dynamoDB.send(command);
      res.json(data);
    } catch (error) {
      res.status(500).json({ error: error.message });
    }
  });
  
  app.listen(3001, () => console.log('代理服务运行在3001端口'));
  

• 前端React调用接口：

  async function loadFromCloud() {
    try {
      const response = await fetch('http://localhost:3001/api/tablex');
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.log(error);
    }
  }
  

3. 本地开发临时方案（仅测试用，禁止生产环境） #

如果只是本地快速测试，可通过AWS STS生成临时凭证，显式传入客户端：

const dynamoDB = new DynamoDBClient({
  region: "us-west-2",
  credentials: {
    accessKeyId: '你的临时Access Key',
    secretAccessKey: '你的临时Secret Key',
    sessionToken: '你的临时Session Token'
  }
});

注意：绝对不要将永久AWS凭证硬编码到前端代码中，会导致凭证泄露，引发严重安全风险。

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