React应用上传至DigitalOcean Spaces遇CORS预检缺失Origin头错误

问题核心 #

浏览器的同源策略会拦截跨域请求的预校验（OPTIONS）请求，当Spaces的CORS配置未正确返回Access-Control-Allow-Origin等必要响应头时，就会触发你遇到的cross error preflight Missing Allow Origin Header错误。而React Native不受浏览器同源策略限制，所以能正常上传。

分步解决方案 #

1. 清理代码冗余（优化无效逻辑） #

你的uploadImage函数中创建了ImageURI、ImageURL、ImageData但未实际使用，直接删除这部分冗余代码，简化后的函数如下：

import { PutObjectCommand } from "@aws-sdk/client-s3";
import { s3 } from './s3'; // 确保文件路径正确

const uploadImage = async (file, id) => {
  if (!file) {
    console.log('请选择要上传的文件');
    return;
  }
  
  try {
    const uploadParams = {
      Bucket: 'digital-trader-spaces',
      Key: file.name,
      Body: file,
      // 可选：若需要公开访问文件，添加ACL配置
      // ACL: 'public-read'
    };
    const data = await s3.send(new PutObjectCommand(uploadParams));
    console.log('上传成功:', data);
  } catch (err) {
    console.error('上传失败:', err);
  }
};

2. 修正S3客户端的凭证顺序（关键错误点） #

你的s3.js里把accessKeyId和secretAccessKey写反了！正确的对应关系应该是：

import { S3 } from "@aws-sdk/client-s3";

const s3 = new S3({
    forcePathStyle: false, 
    endpoint: "https://fra1.digitaloceanspaces.com",
    region: "fra-1",
    credentials: {
        accessKeyId: '你的ACCESS_KEY', // 此处填写Access Key ID
        secretAccessKey: '你的SECRET_KEY', // 此处填写Secret Access Key
    }
});

export {s3};

凭证顺序错误会导致请求鉴权失败，进而触发CORS相关报错。

3. 正确配置DigitalOcean Spaces的CORS规则 #

登录DigitalOcean控制台，找到目标Spaces存储桶，进入Settings > CORS Configuration，替换为以下配置（根据你的环境调整AllowedOrigins）：

[
  {
    "AllowedOrigins": ["http://localhost:3000", "https://你的生产域名.com"],
    "AllowedMethods": ["OPTIONS", "PUT"],
    "AllowedHeaders": ["Content-Type", "x-amz-acl", "x-amz-meta-*", "Authorization"],
    "ExposeHeaders": ["ETag"],
    "MaxAgeSeconds": 3000
  }
]

• AllowedOrigins：明确列出前端域名，开发环境记得添加http://localhost:3000（端口根据你的React项目调整）；测试阶段可临时用["*"]，但生产环境必须指定具体域名。
• AllowedMethods：必须包含OPTIONS（预请求方法）和PUT（上传方法）。
• AllowedHeaders：覆盖上传时可能用到的请求头，尤其是Authorization（aws-sdk会自动添加）和Content-Type。

4. 验证配置生效 #

保存CORS配置后，等待1-2分钟让配置生效，重新测试上传。若仍报错，打开浏览器网络面板，查看OPTIONS请求的响应头，确认是否包含Access-Control-Allow-Origin且值匹配你的前端域名。

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