关于跨域:对象存储-COS-帮您轻松搞定跨域访问需求

33次阅读

共计 3565 个字符,预计需要花费 9 分钟才能阅读完成。

背景

晚期为了防止 CSRF(跨站申请伪造)攻打,浏览器引入了“同源策略”机制。如果两个 URL 的协定,主机名(域名 /IP),端口号统一,则视为这两个 URL“同源”,属于同一个“域”,否则视为“非同源”,即“跨域”。浏览器会被动拦挡跨域的 AJAX 申请,以躲避平安危险。

“同源策略”诚然晋升了申请的安全性,但有时咱们须要跨域申请其余域名下的资源,例如在业务域名下申请 COS 的 API 接口,或者读取 COS 存储桶中文件的内容,进行一些逻辑解决。

浏览器反对一种跨域的拜访验证的机制,即 CORS(Cross-Origin Resource Sharing 跨源资源共享)。该机制容许服务端通过返回特定的 HTTP 头部来告知浏览器是否拦挡跨域申请。

COS 反对用户在存储桶中配置“跨域拜访 CORS”规定,以此放行一些非法的跨域申请。

业务场景

上面咱们以 博客网站开发 为例,带您理解如何在 COS 配置 CORS 规定。

用户正在开发一个博客网站,为此他将一批 markdown 文件上传到 COS,对每个 markdown 文件设置了自定义头部 x-cos-meta-keywords 示意该文章的关键词,并将文件权限设置为私有读公有写。

网站的前端 JS 脚本通过浏览器向 COS 发动 AJAX 申请,读取响应的内容以及头部信息,将内容转换为 HTML 文本,解析 x-cos-meta-keywords 中蕴含的关键词,别离挂载到页面对应的 DOM 节点下,其申请过程如下图所示:

用户网站的地址是 http://example.com,Markdown 文件的地址是 https://bucketname-1250000000.cos.ap-guangzhou.myqcloud.com/test.md

很显然,这是在 http://example.com 下对 https://bucketname-1250000000.cos.ap-guangzhou.myqcloud.com 发动申请,波及跨域。

不出意外地,浏览器拦挡了该申请,关上浏览器的 Console 栏能够看到如下报错:

Access to XMLHttpRequest at 'https://bucketname-1250000000.cos.ap-guangzhou.myqcloud.com/test.md'
from origin 'http://example.com' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET https://bucketname-1250000000.cos.ap-guangzhou.myqcloud.com/test.md net::ERR_FAILED

CORS 跨域拜访机制

为了解决该问题,咱们须要了解浏览器的 CORS 跨域拜访机制。浏览器将 CORS 申请分成两类:简略申请(simple request)和非简略申请(not-so-simple request),只有同时满足以下两大条件,就属于“简略申请”,否则就属于“非简略申请”。

申请办法是以下三种办法之一:

  • HEAD
  • GET
  • POST

HTTP 的头信息不超出以下几种字段:

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type:只限于三个值 application/x-www-form-urlencodedmultipart/form-datatext/plain

对于简略申请,浏览器会在申请时携带 Origin 头部,申明该申请来自哪个“域”,服务端通过 Access-Control-Allow-OriginAccess-Control-Allow-Methods 响应头来告知浏览器容许的“域”和“HTTP 动词”。

对于非简略申请,浏览器会在理论申请前发动一次“预检申请(preflight request)”,用于询问服务端是否容许跨域,如果不容许,则不发动理论申请。

预检申请应用 OPTIONS 动词,并携带 OriginAccess-Control-Request-MethodAccess-Control-Request-Headers 申请头部,来申明“以后的域”、“理论申请应用的 HTTP 动词”和“理论申请将携带的头部”等信息。

服务端通过 Access-Control-Allow-OriginAccess-Control-Allow-MethodsAccess-Control-Allow-HeadersAccess-Control-Allow-Credentials 响应头来告知浏览器“容许的域”、“容许的所有 HTTP 动词”、“容许携带的所有 HTTP 头部”以及“是否容许携带鉴权信息(Cookie,Authorization 头部等)”。

同时,为了防止频繁发动跨域检测,服务端会返回 Access-Control-Max-Age 来申明本次跨域检测的有效期,浏览器会缓存检测后果,并在有效期内应用浏览器缓存。

服务端还能够通过返回 Access-Control-Expose-Headers 头部来告知浏览器,哪些特定响应头容许裸露给 AJAX 申请。通常只有 Cache-ControlContent-LanguageContent-TypeExpiresLast-ModifiedPragma 容许裸露,其余头部须要服务端特定申明。

浏览器会依据预检申请响应的 CORS 相干头部进行判断,只有理论申请的 OriginMethodsHeaders 等均符合要求,才会发动理论申请。

在 COS 配置 CORS 跨域规定

理解了 CORS 跨域拜访机制后,咱们看看用户须要配置的哪些 CORS 响应头部。

  • 需配置Access-Control-Allow-Origin,必须蕴含 http://example.com,示意容许 http://example.com 对 COS 的跨域拜访。
  • 需配置 Access-Control-Allow-Methods,必须蕴含GET 办法。
  • 需配置Access-Control-Expose-Headers,必须蕴含自定义头部 x-cos-meta-keywords,示意容许裸露该响应头部。

于是用户进入 COS 控制台,点击进入存储桶,在左侧的“平安设置”中抉择“跨域拜访 CORS 设置”,点击增加规定,按如下规定填写:

  • 起源 Origin:填入 http://example.com(也能够填写 *,代表容许所有域)
  • 操作 Methods:勾选 GET
  • Allow-Headers:设置为 *,代表申请容许携带任何头部
  • Expose-Headers:增加 x-cos-meta-keywords

理论填写如下图所示,点击确定。

再次尝试刚刚的跨域申请,能够看到,跨域申请胜利,并返回了文件内容以及自定义头部信息。

更进一步,用户还心愿在网站上增加“保留文章”,“删除文章”等性能,为了升高开发成本,咱们举荐其应用 cos-js-sdk-v5。为防止后续其余申请的跨域问题,咱们举荐进行如下设置:

  • 起源 Origin:填入 http://example.com(填写您的域名,须蕴含协定)
  • 操作 Methods:勾选 PUTGETPOSTDELETEHEAD
  • Allow-Headers:设置为 *,代表申请容许携带任何头部
  • Expose-Headers:增加 ETagx-cos-request-id 头部,确保 SDK 能够读取到须要的头部
  • 超时 Max-Age:设置为 600,让浏览器缓存跨域检测后果,过期工夫为 600 秒

CDN 上配置 CORS 规定

如果开明了 CDN 服务,并且设置 COS 为 CDN 的源站,因为 CDN 会缓存 COS 的响应后果,包含跨域响应头部。通过 CDN 域名拜访 COS 上的文件时,如果心愿响应的跨域头部为最新配置,能够在 CDN 控制台的“Response Header 配置”中设置 CORS 相干跨域头部,如下图所示:

能够看到,跨域申请 CDN 减速域名下的资源胜利,响应的跨域头部和 CDN 控制台配置的统一。

结语

全文通过博客网站开发,浏览器被动拦挡跨域的 AJAX 申请的场景,具体介绍了 CORS 跨域拜访机制,以及如何在 COS 和 CDN 上配置 CORS 跨域规定。

此外,对象存储 COS 的 CORS 跨域机制基于存储桶能够配置多条跨域拜访规定,容许 Web 应用服务器进行跨域访问控制,使得跨域数据传输得以平安进行,简略易用,无需额定的第三方工具操作。满足客户 Web 利用须要跨域拜访存储桶资源的需要,帮忙您构建内容丰盛的 Web 利用。

COS 始终在一直地丰盛产品个性,帮忙用户更加轻松的应用对象存储 COS,让用户聚焦于数据内容,为业务赋能,开释数据价值。

正文完
 0