乐趣区

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

jiezi

背景

晚期为了防止 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-urlencoded、multipart/form-data、text/plain

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

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

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

服务端通过 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers、Access-Control-Allow-Credentials 响应头来告知浏览器“容许的域”、“容许的所有 HTTP 动词”、“容许携带的所有 HTTP 头部”以及“是否容许携带鉴权信息（Cookie，Authorization 头部等）”。

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

服务端还能够通过返回 Access-Control-Expose-Headers 头部来告知浏览器，哪些特定响应头容许裸露给 AJAX 申请。通常只有 Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma 容许裸露，其余头部须要服务端特定申明。

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

在 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：勾选 PUT、GET、POST、DELETE、HEAD
  • Allow-Headers：设置为 *，代表申请容许携带任何头部
  • Expose-Headers：增加 ETag，x-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，让用户聚焦于数据内容，为业务赋能，开释数据价值。

退出移动版