video跨域

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

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

低版本chrome请求及返回：

高版本请求及返回：

可以明显看到高版本的返回没有response，并且低版本的返回也没有允许跨域的Access-Control-Allow-Origin标志。

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

三、问题处理：
1、服务器有没有能力返回跨域请求头
首先这个请求域名是个云静态服务器，那一般都添加了跨域设置，我找了另一个请求也可以看出，该服务器是能够正常返回跨域信息的。

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属性之后，服务端返回就添加上了跨域信息头。

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属性即可。