平台对接华为云的obs时,上传附件报错,经排查发现是前端cors拦截报错了
报错内容如下:
Access to XMLHttpRequest at '华为云桶地址' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
核心解决方案:配置 OBS 桶的 CORS 规则
这是解决该问题的根本方法。请按照以下步骤操作:
-
登录华为云控制台 ,进入对象存储服务 OBS。
-
在桶列表中,找到你正在使用的桶,并点击进入其详情页面。
-
在左侧导航栏找到 "基础配置" 或 "权限控制" ,点击 "CORS规则"。
-
点击 "创建" 按钮,添加一条新的 CORS 规则。
请按照下面的推荐配置进行填写:
| 配置参数 | 推荐填写值 | 说明与要求 |
|---|---|---|
| 允许的来源 | http://localhost:8080 |
必填 。精确填写你前端应用的源地址。生产环境请务必替换为你的正式域名 ,不要使用 * 通配符。 |
| 允许的方法 | GET, POST, PUT, DELETE, HEAD |
必填 。选择你前端需要使用的所有HTTP方法。对于文件上传,POST 和 PUT 是必需的。 |
| 允许的头域 | * |
必填 。华为云官方推荐配置为 *,以允许所有头域。这对于携带如 Content-MD5 等自定义头进行上传验证至关重要。 |
| 补充头域 | ETag |
可选,但强烈建议 。如果你前端需要获取文件的MD5值进行校验,请在此处填写 ETag。 |
| 缓存时间 | 100 |
可选 。浏览器缓存预检请求(OPTIONS)的结果时间,单位是秒。保持默认或设置为 300 即可。 |
点击 "确定" 。CORS 配置通常会在2分钟内生效
添加上述规则后,可以正常上传附件了