video跨域

一、问题描述:
在页面里面使用了video标签来播放视频,在低版本的chrome中正常播放,但是在76版本的chrome中报错Cross-Origin Read Blocking (CORB) blocked cross-origin response

二、问题定位:
看到这个内容首先想到的是,这个资源跨域被浏览器同源策略限制访问了。
可是为什么低版本显示正常,76版本中确显示错误呢?
那就先看下这两次请求有什么差别吧。

低版本chrome请求及返回:
video跨域_第1张图片

高版本请求及返回:
video跨域_第2张图片
可以明显看到高版本的返回没有response,并且低版本的返回也没有允许跨域的Access-Control-Allow-Origin标志。

所以这个现象就归结于三个问题了:
1、服务端有没有能力返回跨域请求头
2、video要怎样设置跨域请求
3、为什么76版本会限制访问静态资源

三、问题处理:
1、服务器有没有能力返回跨域请求头
首先这个请求域名是个云静态服务器,那一般都添加了跨域设置,我找了另一个请求也可以看出,该服务器是能够正常返回跨域信息的。
video跨域_第3张图片
2、video要设置能够跨域请求
既然服务端可以正常返回跨域请求头,那不能跨域就需要网页来背锅了。我在这里一直有个思维误区,以为浏览器的同源策略是不会对静态资源做限制的。所以就心安理得的认为这个video应该能够正常播放其他域名的资源。并且这个理解对chrome 76以下的版本也的确是正确的。但其实video本身就有可以添加跨域的配置。

在HTML5中,一些 HTML 元素提供了对 CORS 的支持, 例如 和 均有一个跨域属性 (crossOrigin property),它允许你配置元素获取数据的 CORS 请求。 这些属性是枚举的,并具有以下可能的值:
anonymous 对此元素的CORS请求将不设置凭据标志。
use-credentials 对此元素的CORS请求将设置凭证标志; 这意味着请求将提供凭据。

详见https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_settings_attributes

下面可以看到添加了crossorign属性之后,服务端返回就添加上了跨域信息头。
在这里插入图片描述video跨域_第4张图片

3、为什么76版本会限制访问
那就剩下最后一个问题了,为什么76版本会限制访问静态资源?

对比了两次发送请求的不同,关键点在Sec-Fetch-Mode这个请求属性,在没有设置video跨域的时候,默认为Sec-Fetch-Mode: no-cors。而76以下版本的chrome不检测这个字段,这个属性是76版本的chrome设置的新提案,因此控制台会有个warning,而不是其他跨域访问的红色error标识。
当video设置了跨域属性之后,这个请求头会被浏览器默认替换为Sec-Fetch-Mode: cors,这样服务器就知道应该需要返回跨域头信息了,浏览器可以正常通过该请求。
详见:https://w3c.github.io/webappsec-fetch-metadata/

至此,这个跨域问题就解决了。
在video标签中添加crossOrigin属性即可。

你可能感兴趣的:(学习总结)