使用react-s3删除S3图片时出现403 Forbidden错误及URL拼接异常

看起来你踩了react-s3库的一个常见小坑——deleteFile函数的参数传错了！你现在遇到的403错误和那个怪异的重复URL，根源都是你传给deleteFile的是完整的S3文件URL，但这个函数只需要文件在桶里的相对路径（也就是S3里的文件键/文件名）。

问题分析 #

当你传入完整URL https://abc-profile-images.s3.amazonaws.com/1601273978.331.jpeg 时，react-s3会自动用你配置的区域（ap-southeast-1）构建桶的基础地址 https://abc-profile-images.s3-ap-southeast-1.amazonaws.com/，然后把你传入的完整URL当作文件名拼在后面，就出现了这个完全错误的请求地址：

https://abc-profile-images.s3-ap-southeast-1.amazonaws.com/https://abc-profile-images.s3.amazonaws.com/1601273978.331.jpeg

S3自然无法识别这种格式的路径，直接返回403 Forbidden。

解决方案 #

我们只需要从完整的S3 URL中提取出文件的键值（也就是桶内的路径），再传给deleteFile就可以了。

步骤1：添加URL提取辅助函数

写一个简单的函数，从S3的完整URL中剥离出文件键：

const getS3FileKey = (s3Url) => {
  const urlObj = new URL(s3Url);
  // 取URL的路径部分，去掉开头的斜杠就是文件在桶里的键
  return urlObj.pathname.slice(1);
}

步骤2：修改removeImage函数

把传入的完整URL转换成文件键后再调用deleteFile：

import { deleteFile } from "react-s3";
import config from './s3config';

const options = {
 accessKeyId: config.ID,
 secretAccessKey: config.key,
 region: config.region,
 bucketName: config.name
}

// 新增辅助函数
const getS3FileKey = (s3Url) => {
  const urlObj = new URL(s3Url);
  return urlObj.pathname.slice(1);
}

const removeImage = (uri) => {
 console.log('original file url : ', uri);
 // 提取文件键
 const fileKey = getS3FileKey(uri);
 console.log('extracted file key : ', fileKey);
 return new Promise((resolve, reject) => {
   deleteFile(fileKey, options)
     .then(result => resolve(result))
     .catch(err => reject(err))
 })
}
export { removeImage };

额外检查（如果还是403）

如果修改后还是返回403，那就要排查权限和CORS配置：

• 确保你的IAM用户拥有s3:DeleteObject权限，对应的策略要包含你操作的桶
• 检查S3桶的CORS配置，要允许DELETE请求，并且来源是你的前端域名，示例CORS规则：

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>https://your-frontend-domain.com</AllowedOrigin>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

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