如何安全实现S3大文件直接下载到React客户端 无需经过Node.js服务

和你提到的预签名上传逻辑一致，下载场景也可以通过Node服务端生成临时授权的预签名URL，客户端直接通过该URL从S3拉取文件，全程不需要经过Node服务转发，既不会泄露AWS密钥，也能彻底解决大文件转发带来的服务负载高、下载慢的问题。

第一步：Node服务端接口改造 #

你可以直接把原有拉取S3文件再转发的逻辑替换为生成预签名URL的逻辑，代码示例如下：

// LOAD AUDIO 改造后的接口
router.get("/getaudio/:userEmail/:projectId/:sectionId", async (req, res) => {    
    // 可先补充用户权限校验逻辑，确认当前请求用户有权限访问对应音频，避免越权
    // ...你的权限校验代码

    const userEmail = req.params.userEmail;
    const projectId = req.params.projectId;
    const sectionId = req.params.sectionId;
    
    const key = `${userEmail}/${projectId}/${sectionId}.webm`;

    const params = {
        Key: key,
        Bucket: s3BucketName,
        Expires: 15 * 60 // 预签名URL有效期，单位为秒，此处设为15分钟，可按需调整
    }

    try {
        // 生成预签名下载URL，不需要实际拉取S3文件
        const signedUrl = await s3.getSignedUrlPromise('getObject', params);
        res.json({ signedUrl });
    } catch (error) {
        console.error(error);
        res.status(500).json({ error: '生成下载链接失败' });
    }
});

第二步：React客户端处理 #

根据你的业务需求选择对应的处理方式：

• 如果需要在页面内播放音频：拿到signedUrl后直接赋值给audio标签的src属性即可，S3原生支持范围请求，大音频可以边缓冲边播放，不需要等全量下载完成。
• 如果需要触发浏览器本地下载：可以通过以下代码实现：

// React侧触发下载的示例代码
const downloadAudio = async () => {
  const res = await fetch(`你的Node服务对应接口地址`);
  const { signedUrl } = await res.json();
  const a = document.createElement('a');
  a.href = signedUrl;
  a.download = '自定义音频文件名.webm'; // 可自定义下载到本地后的文件名
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

必要配置补充 #

• 你需要提前在S3存储桶的CORS规则中允许你的React应用域名发起GET请求，否则会出现跨域错误。
• 不需要修改S3存储桶的公开访问权限，私有桶也可以正常使用预签名URL。

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