今天在对接一个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属性即可。