共计 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-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,让用户聚焦于数据内容,为业务赋能,开释数据价值。