React用Minio预签名URL传图遇403 CORS错误，求解决方案

1. 修复Axios请求的语法错误与错误配置 #

你的Axios代码存在语法混乱问题，且错误设置了响应头，这是引发异常的直接原因：

• 移除重复的参数（editorResult多次重复、配置对象嵌套错误）
• 删除请求中的Access-Control-Allow-Origin头，这是服务器专属响应头，前端发起请求时设置会触发预检请求失败
• 预签名URL已包含认证信息，无需开启withCredentials: true，直接关闭该配置

修正后的Axios代码：

const signed_url = await generateSignedUrl();

if (!signed_url) {
  console.error('获取预签名URL失败');
  return;
}

try {
  const response = await axios.put(signed_url, editorResult, {
    headers: {
      // 根据实际文件类型设置Content-Type，示例为图片类型
      'Content-Type': 'image/jpeg'
    }
  });
  console.log('文件上传成功:', response);
} catch (e) {
  console.log('文件上传错误:', e);
  console.log('错误响应:', e.response);
}

2. 修正Docker Compose中Minio的存储路径匹配问题 #

你的Docker Compose配置里，Minio启动命令指定的存储路径是/data，但挂载的宿主机目录对应容器内的/export，路径不匹配会导致Minio使用容器临时目录，之前在GUI设置的CORS配置会随容器重启丢失。

修改Docker Compose的Minio配置：

minio:
  image: "quay.io/minio/minio"
  volumes:
    - ./.data/minio/data:/export
    - ./.data/minio/config:/root/.minio
  ports:
    - 9000:9000
    - 9001:9001
  environment:
    - MINIO_ROOT_USER=test
    - MINIO_ROOT_PASSWORD=test
    - MINIO_SERVER_URL=http://localhost:9000
  command: server /export --console-address :9001 # 改为与挂载路径一致的/export

修改后重启Minio容器：

docker-compose down && docker-compose up -d

3. 重新配置Minio完整CORS规则 #

仅设置允许来源*不够，需补充必要的方法、头信息：

1. 打开Minio控制台（http://localhost:9001），进入目标存储桶的管理 -> CORS
2. 添加完整的CORS规则：

[
  {
    "AllowedOrigins": ["*"],
    "AllowedMethods": ["PUT", "GET", "POST", "DELETE"],
    "AllowedHeaders": ["*"],
    "ExposeHeaders": ["ETag"],
    "MaxAgeSeconds": 3000
  }
]

• AllowedMethods必须包含PUT（匹配你的上传请求方法）
• AllowedHeaders设为*避免因请求头缺失导致预检失败

4. 检查后端预签名URL生成逻辑 #

确保后端生成预签名URL时：

• 使用正确的Minio端点（http://localhost:9000）
• 指定的存储桶、对象路径与实际一致
• 生成的是PUT方法的预签名URL（与前端请求方法匹配）
• URL有效期足够覆盖上传时长

5. 验证浏览器预检请求 #

打开浏览器开发者工具（F12），查看网络面板的OPTIONS预检请求：

• 确认响应头包含Access-Control-Allow-Origin: *
• 确认Access-Control-Allow-Methods包含PUT
• 若预检失败，根据响应头缺失项调整Minio的CORS规则

内容的提问来源于stack exchange，提问作者ほせまさ