华为云 OBS 上传文件提示跨域错误？教你配置 CORS 规则

一、问题背景

平时开发网站时，有时候需要把用户上传的图片或文件直接保存到华为云 OBS。

但在前端调用 OBS 上传接口时，浏览器可能会出现下面的错误：

Access to fetch has been blocked by CORS policy

或者提示：

No 'Access-Control-Allow-Origin' header

这通常是因为浏览器的跨域访问限制，OBS 没有配置匹配的 CORS 规则。

下面介绍一种简单的处理方法。

二、什么是 CORS？

CORS（跨域资源共享）是一种浏览器安全机制。

比如，我们的网站地址是：

https://www.example.com

而文件存储在华为云 OBS 的另一个域名下。

由于两个域名不同，浏览器会检查 OBS 是否允许来自该网站的跨域请求。

如果没有配置相应规则，就可能出现跨域错误。

三、进入 OBS 控制台

首先，登录华为云控制台。

1. 搜索并进入 对象存储服务 OBS。

2. 点击需要配置的存储桶。

3. 在左侧菜单找到 数据安全 → CORS规则。

4. 点击 创建，添加一条新的跨域规则。

不同版本的控制台，菜单位置可能略有区别，可以直接查找“CORS规则”。

四、配置 CORS 规则

假设我们的网站地址是：

https://www.example.com

需要通过网页上传文件，可以参考下面的配置。

1. 允许的来源

填写网站实际使用的域名：

https://www.example.com

如果是本地开发环境，例如 Vue 项目使用 5173 端口，可以填写：

http://localhost:5173

2. 允许的方法

根据实际上传方式选择：

PUT
POST

如果还需要读取文件，可以增加 GET 方法。

3. 允许的头域

可以根据实际请求填写：

Content-Type
x-obs-*

如果请求中还使用了其他自定义请求头，需要相应增加。

4. 补充头域

如果前端需要读取上传响应中的 ETag，可以填写：

ETag

5. 缓存时间

可以先使用默认值：

100

单位为秒。

配置完成后，点击确定保存。

华为云官方文档说明，CORS 规则一般会在两分钟内生效。

五、如何检查是否配置成功？

配置完成后，重新打开网页上传文件。

如果仍然报错，可以按 F12 打开浏览器开发者工具，进入 Network（网络）面板。

重点查看：

• OPTIONS 请求是否正常返回。

• 请求的 Origin 是否与配置的来源一致。

• 响应头中是否包含 Access-Control-Allow-Origin。

• 实际上传请求是否返回 403 等错误。

如果 OPTIONS 请求通过，但上传仍然提示 403，就需要进一步检查 OBS 的访问权限、请求签名或临时授权是否正确。

需要注意，CORS 配置只是允许浏览器跨域访问，并不代表自动获得文件上传权限。

六、注意事项

配置 CORS 时，不建议为了方便直接把所有来源都设置为 *。

如果只是自己的网站需要上传文件，最好填写明确的网站域名。

同时，允许的方法和请求头也尽量按实际需求配置，避免开放不必要的跨域操作。

另外，前端上传 OBS 文件时，不要直接把长期有效的 AK、SK 密钥写在网页代码中，应使用适当的临时授权或预签名 URL。

七、总结

华为云 OBS 上传文件出现 CORS 错误时，可以优先检查三个地方：

1. 网站域名是否在允许的来源中。

2. 上传使用的 PUT 或 POST 方法是否被允许。

3. 请求携带的头域是否与 CORS 规则匹配。

大部分由 CORS 配置不匹配引起的问题，都可以通过这些步骤定位。

如果跨域错误已经解决，但上传仍然失败，就需要继续检查 OBS 的访问权限和上传请求本身。