跨域strict-origin-when-cross-origin vue前端解决
今天在对接一个hls协议的视频直播流的时候，提示跨域问题，导致一直播放不了，
一直在提示 strict-origin-when-cross-origin 跨域问题。
首先上代码
import "video.js/dist/video-js.css"
import videojs from "video.js"
import "videojs-contrib-hls"
<div class="video" v-for="(item,index) in cameraList" :key="index" v-if="vedioSatatus">
<video
:id="`my-video${index}`"
class="video-js vjs-default-skin"
controls
preload="auto"
crossOrigin='anonymous'
>
<source
:src="item"
type="application/x-mpegURL"
/>
</video>
</div>代码比较简单，使用video.js 插件播放的视频流。
问题分析
在低版本的chrome中正常播放，但是在76版本的chrome中报错Cross-Origin Read Blocking (CORB) blocked cross-origin response。
首先看到Cross-Origin ，就意思是这个资源跨域被浏览器同源策略限制访问了。
这些个https请求 ，response 返回值都是空。
通过现象看问题的话，有两个。
一个是服务端是不是有能力返回跨域请求头
第二个是video 在vue端 如何设置跨域请求，能允许跨域请求这些https url
方案
1、设置服务端返回跨域请求头信息，如图
2、video 设置允许跨域请求
服务端可以正常返回跨域请求头，那不能跨域，就是因为网页端的原因了。
所以，就得看一下 vue 端如何设置 支持video.js 支持跨域请求了。
其实video.js插件本身是能够设置允许跨域请求，
在HTML5中，一些 HTML 元素提供了对 CORS 的支持， 例如 和 均有一个跨域属性 (crossOrigin property)，它允许你配置元素获取数据的 CORS 请求。 这些属性是枚举的，并具有以下可能的值：
anonymous 对此元素的CORS请求将不设置凭据标志。
use-credentials 对此元素的CORS请求将设置凭证标志; 这意味着请求将提供凭据。
如下图，加上跨域属性
这样的话，就不提示跨域请求了，可以正常播放视频了。
所以，总结一句话，在video标签中添加 crossOrigin属性即可。