React JS应用无法接入AWS S3问题求助

1. 优先切换到 AWS SDK v3（核心解决方案） #

老版 aws-sdk（v2）是为 Node.js 环境设计的，包含大量浏览器不支持的 Node 核心模块（如fs、path），直接在 React 中导入会导致运行时错误白屏。推荐使用官方专为前端优化的 AWS SDK v3，它是模块化设计，体积更小且适配浏览器环境：

• 卸载旧版 SDK：

  npm uninstall aws-sdk
  

• 安装 S3 相关的 v3 模块：

  npm install @aws-sdk/client-s3 @aws-sdk/lib-storage
  

2. 正确初始化 S3 客户端（v3 示例代码） #

import { S3Client, ListBucketsCommand } from "@aws-sdk/client-s3";

// 初始化客户端，避免硬编码密钥，用环境变量管理
const s3Client = new S3Client({
  region: "你的存储桶区域（如us-east-1）",
  credentials: {
    accessKeyId: process.env.REACT_APP_AWS_ACCESS_KEY,
    secretAccessKey: process.env.REACT_APP_AWS_SECRET_KEY
  }
});

// 测试调用示例
const testS3Connection = async () => {
  try {
    const response = await s3Client.send(new ListBucketsCommand({}));
    console.log("存储桶列表:", response.Buckets);
  } catch (err) {
    console.error("连接失败:", err);
  }
};

3. 环境变量配置注意事项 #

React 仅识别以 REACT_APP_ 开头的环境变量，需在项目根目录创建 .env 文件：

REACT_APP_AWS_ACCESS_KEY=你的AWS访问密钥
REACT_APP_AWS_SECRET_KEY=你的AWS秘密密钥
REACT_APP_AWS_REGION=存储桶所在区域

配置完成后重启本地开发服务器，确保变量生效。

4. 放弃第三方封装库（react-s3/react-aws-s3） #

这些第三方库大多基于停止维护的 AWS SDK v2，兼容性差且bug多，直接改用官方 v3 SDK 是最可靠的方案。

5. 排查浏览器控制台错误 #

保留导入语句，按 F12 打开浏览器开发者工具，查看 Console 面板的具体错误：

• 若出现 process is not defined：在 package.json 中添加 "browser": { "process": false }，或使用 react-app-rewired 调整 Webpack 配置（v3 SDK 一般不会触发此问题）。
• 若出现 CORS 错误：登录 AWS S3 控制台，给存储桶配置 CORS 规则：

  [
    {
      "AllowedHeaders": ["*"],
      "AllowedMethods": ["GET", "PUT", "POST", "DELETE"],
      "AllowedOrigins": ["http://localhost:3000"],
      "ExposeHeaders": []
    }
  ]
  

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