您好,欢迎访问上海聚搜信息技术有限公司官方网站!
24小时咨询热线:4000-747-360

阿里云国际站代理商:对象存储 OSS存储空间(Bucket) 跨域资源共享怎么操作

时间:2022-08-29 22:59:49 点击:

跨域资源共享CORS(CrOSS-Origin Resource Sharing)简称跨域访问,是HTML5提供的标准跨域解决方案,允许Web应用服务器进行跨域访问控制,确保跨域数据传输的安全性。

同源检测

跨域访问是浏览器出于安全考虑而设置的一个限制,即同源策略,是用于隔离潜在恶意文件的关键安全机制。当A、B两个网站属于不同域时,来自于A网站页面中的JavaScript代码访问B网站时,浏览器会拒绝该访问。

同协议、同域名(或IP)、以及同端口视为同域。两个页面的协议、域名和端口(若指定了端口)相同,则视为同源。下表给出了相对http://www.aliyun.com/org/test.html的同源检测示例:


URL访问是否成功原因
http://www.aliyun.com/org/other.html协议、域名、端口相同
http://www.aliyun.com/org/internal/page.html协议、域名、端口相同
https://www.aliyun.com/page.html协议不同(HTTPS)
http://www.aliyun.com:22/dir/page.html端口不同(22)
http://www.alibabacloud.com/help/other.html域名不同

从上表中可以看出,协议、域名或者端口不同的情况下,浏览器会拒绝该来源的访问。如果要允许这些来源的访问,需要设置跨域资源共享规则。

注意事项

  • 每个Bucket最多可以配置10条跨域规则。

  • 当OSS收到一个跨域请求(或者OPTIONS请求)时,会读取Bucket对应的CORS规则,然后进行相应的权限检查。OSS会依次检查每一条规则,使用第一条匹配的规则来允许请求并返回对应的Header。如果所有规则都匹配失败,则不附加任何CORS相关的Header。

  • 如果您开启了CDN加速,并且需要进行跨域访问时,您需要在CDN控制台配置跨域规则。具体步骤,请参见CDN如何配置跨域资源共享(CORS)

CORS规则

OSS支持根据需求灵活配置CORS规则,实现允许或者拒绝相应的跨域请求。CORS规则仅用来决定是否附加CORS相关的Header,是否拦截跨域请求由浏览器决定。

以下两种情况下需选中返回Vary: Origin以避免本地缓存错乱。

注意 选中返回Vary: Origin后,可能会造成浏览器访问次数或者CDN回源次数增加。

  • 同时存在CORS和非CORS请求

    例如实际请求中在<img>标签下发起非CORS请求,在fetch下发起CORS请求。

    <!doctype html><html><head>  <meta charset="UTF-8">  <title>CORS Test</title></head><body>//非CORS请求。<img src="https://examplebucket.oss-cn-beijing.aliyuncs.com/exampleobject.txt" alt=""><script>
      //CORS请求。  fetch("https://examplebucket.oss-cn-beijing.aliyuncs.com/exampleobject.txt").then(console.log)</script></body></html>
  • Origin头存在多种可能值

    例如实际应用中指定允许的跨域请求来源Origin头为http://www.example.com以及https://www.example.org

使用OSS控制台


  1. 登录OSS管理控制台。

  2. 单击Bucket列表,然后单击目标Bucket名称。

  3. 在左侧导航栏,选择权限管理 > 跨域设置,然后在跨域设置区域,单击设置

  4. 单击创建规则,在创建跨域规则面板设置跨域访问参数。


    参数是否必须说明
    来源指定允许的跨域请求的来源。配置规则如下:

    域名配置示例如下:

    允许Methods指定允许的跨域请求方法。
    允许Headers指定允许跨域请求的响应头。配置规则如下:
    暴露Headers指定允许用户从应用程序中访问的响应头,例如一个JavaScript的XMLHttpRequest对象。不允许使用星号(*)通配符。

    建议暴露的常见Headers如下:

    缓存时间指定浏览器对特定资源的预取(OPTIONS)请求返回结果的缓存时间,单位为秒。
    返回Vary: Origin配置是否返回Vary: Origin Header。

    如果实际应用中同时存在CORS和非CORS请求,或者Origin头有多种可能值时,建议选中返回Vary: Origin以避免本地缓存错乱。

    注意 选中返回Vary: Origin后,可能会造成浏览器访问次数或者CDN回源次数增加。

    有关以上配置的各项跨域访问参数的更多信息,请参见PutBucketCors。

    • x-oss-request-id

      在您使用OSS服务遇到问题时,凭借此Request ID请求技术支持协助排查并解决您遇到的问题。

    • ETag

      可用于检查Object内容是否发生变化。

    • 格式为key:value,例如content-type:text/plain,大小写不敏感。

    • 允许多条匹配规则,多条规则需换行填写。

    • 每条匹配规则最多使用一个星号(*)通配符。建议没有特殊需求的情况下设置为星号(*)。

    • 匹配指定域名时,填写完整域名,例如:https://www.example.com。

    • 匹配泛二级域名,可使用通配符星号(*)。例如:https://*.example.com。

    • 匹配所有域名,可直接填写通配符星号(*)。

    • 允许多条匹配规则,多条规则需换行填写。

    • 域名需包含协议名,例如HTTP、HTTPS。

    • 支持通配符星号(*),每条匹配规则允许使用最多一个星号(*)。

    • 若域名使用的不是默认端口,还需要携带端口号。例如:https://www.example.com:8080。

  5. 单击确定

标签

收缩
  • 电话咨询

  • 4000-747-360
微信咨询 获取代理价(更低折扣)
更低报价 更低折扣 代金券申请
咨询热线: 15026612550