设置跨域访问
概述
跨域资源共享(Cross-Origin Resource Sharing,CORS)是 HTML5 提供的标准跨域解决方案,而跨域访问是指当发起请求的资源所在域不同于该请求所指向的资源所在域时的一种访问形式。出于安全考虑,浏览器会限制这种非同源的访问,但在实际应用中,跨域访问需求是普遍存在的。例如,用户的网站 A (http://domainA.example
) 后端使用了 BOS 存储,用户想在该网站的 Web 应用程序中引用存储在 BOS 上的资源。而根据 HTML5 协议要求,该引用操作只能向网站域名 http://domainA.example
发起请求,向其他网站发送的请求均会被浏览器限制。
BOS 支持 HTML5 协议中的跨域资源共享 CORS 设置,帮助用户实现跨域访问。CORS 通过 HTTP 请求中附带 Origin 的 Header 来表明自己来源域。如上面的例子,Origin 的 Header 就是 http:// domainA.example
。服务器端接收到这个请求之后,会根据一定的规则判断是否允许该来源域的请求,如果允许的话,服务器在返回的响应中会附带上 Access-Control-Allow-Origin 这个 Header,内容为 http:// domainA.example
来表示允许该次跨域访问。如果服务器允许来自任何域名的跨域请求,则可将 Access-Control-Allow-Origin 的Header设置为 * 即可,浏览器根据是否返回了对应的 Header 来决定该跨域请求是否成功,如果没有附加对应的 Header,浏览器将会拦截该返回结果。如果是非简单请求,浏览器会先发送一个 OPTIONS 请求(预请求)来探测这个跨域请求对于服务器端是不是安全可接受的,如果服务器不支持接下来的操作,浏览器会拦截该跨域请求。
设置跨域访问
- 登录 对象存储 BOS 管理控制台。
- 在左侧 Bucket 列表中,选择需要设置权限的 Bucket,点击 Bucket 名称进入 Bucket 管理目录。
- 在上方导航栏选择 配置管理 页签。
- 在 配置管理 页面中选择 基础配置,在 跨域访问CORS配置 区域点击 新增配置 对该 Bucket 的跨域访问进行配置。
设置参数说明
名称 | 描述 |
---|---|
Origins | 指定允许的跨域请求的来源。Origin 可以设置多个,每行 1 个,每行最多 1 个*符号, * 表示允许所有来源的跨域请求,还支持 *作为后缀来表示某一类网站,例如abc * ,表示支持abc开头的网站 |
Methods | 指定允许的跨域请求方法 |
Headers | 指定允许的跨域请求 Header。Header 可以设置多个,每行 1 个,每行最多 1 个 *符号 |
ExposeHeaders | 指定允许用户从应用程序中访问的响应头(例如 1 个 Javascript 的 XMLHttpRequest 对象) ExposeHeader 可以设置多个,每行 1 个,不能出现*符号 |
maxAgeSeconds | 指定浏览器对特定资源的预取(OPTIONS)请求返回结果的缓存时间 |
注意事项
- CORS 只针对浏览器环境有意义,相关的 Header 附加由浏览器自动完成,不需要用户手动操作。
- CORS 请求与 BOS 的身份验证是完全独立的,即 CORS 规则仅仅是用来决定是否附加 CORS 相关的 Header 的一个规则,是否拦截该请求完全由浏览器决定。
- 使用跨域请求的时候需要关注浏览器是否开启了 Cache 功能。当运行在同一个浏览器上分别来源于不同域
http://domainA.example
和http://domainB.example
的两个页面都同时请求同一个跨域资源的时候,如果http://domainA.example
的请求先到达服务器,服务器将资源带上Access-Control-Allow-Origin 的 Header 为http://domainA.example
返回给用户。这个时候http://domainB.example
又发起了请求,浏览器会将 Cache 的上一次请求结果返回给用户,这个时候 Header 的内容和 CORS 的要求不匹配,就会导致后面的请求失败。
更多关于 CORS 的介绍可以参考跨域资源共享。
- 点击 确认,完成配置。
- 添加 CORS 规则后,点击列表右侧的 修改,可修改 CORS 规则。
- 添加 CORS 规则后,若您希望删除该条规则,可点击列表右侧的 删除,可以删除单条 CORS 规则。
相关 API
- PutBucketCors 接口:使用 PutBucketCors API 接口在指定的 Bucket 上设定一个跨域资源共享(CORS)的规则。
- GetBucketCors 接口:使用 GetBucketCors API 接口获取指定的 Bucket 当前的CORS规则。
- DeleteBucketCors 接口:使用 DeleteBucketCors API 接口关闭指定 Bucket 的 CORS 功能并清空所有规则。