如何在ReactJS中读取AWS S3存储的.txt文本文件

故障排查前置操作 #

• 确认S3桶权限与跨域配置：
  • 若走前端直连读取，需确认目标TXT文件已设置公开可读权限，或请求头携带合法的AWS签名凭证
  • 确认S3桶CORS规则允许你的React项目域名发起GET请求，参考配置如下：

[
  {
      "AllowedHeaders": ["*"],
      "AllowedMethods": ["GET"],
      "AllowedOrigins": ["你的React项目部署域名，本地开发可填http://localhost:3000"],
      "ExposeHeaders": []
  }
]

方案1：前端直连读取（适用公开可读文件） #

React端用fetch方法读取文本内容示例：

import { useEffect, useState } from 'react';

function S3TxtReader() {
  const [content, setContent] = useState('');
  // 此处替换为从后端接口获取到的S3直链
  const s3Url = 'https://bucketnmame.s3.amazonaws.com/folder1/folder2/file.txt';

  useEffect(() => {
    const getTxt = async () => {
      try {
        const res = await fetch(s3Url);
        if (!res.ok) throw new Error('S3文件请求失败');
        // 文本文件需调用text()方法读取，不要使用json()
        const txt = await res.text();
        setContent(txt);
      } catch (err) {
        console.error('读取错误：', err);
      }
    };
    getTxt();
  }, [s3Url]);

  return <div>{content}</div>;
}

export default S3TxtReader;

方案2：后端代理转发（适用私有桶文件，更安全） #

不想公开S3文件权限的情况下，可通过NodeJS后端代理请求，避免前端跨域和密钥泄露问题：

const AWS = require('aws-sdk');
// 初始化S3实例
const s3 = new AWS.S3({
  accessKeyId: '你的AWS_ACCESS_KEY_ID',
  secretAccessKey: '你的AWS_SECRET_ACCESS_KEY',
  region: 'S3桶所在区域编码'
});

// 新增后端接口路由
app.get('/fetch-s3-txt', async (req, res) => {
  const { fileKey } = req.query; // 前端传文件路径：folder1/folder2/file.txt
  try {
    const params = {
      Bucket: '你的S3桶名',
      Key: fileKey
    };
    const s3Data = await s3.getObject(params).promise();
    const txtContent = s3Data.Body.toString('utf-8');
    res.send(txtContent);
  } catch (err) {
    res.status(500).send('文件读取失败');
  }
});

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