vue使用video播放视频跨域问题“has been blocked by CORS policy: No ‘Access-Control-Allow-Origin

直接看代码

重点

注意：是crossOrign=“anonymous”，不是crossOrigin=“anonymous”

我真的服了，网上答案十个九个都是错的，那些人发出来的东西自己都不验证一下吗，多了一个 i 让我好找啊，最后还是解决了，如果你用crossOrign无法解决就把 i 加上吧，我也不知道什么原因，反正的我不加 i 就可以播放了，记录一下这个大坑

<video
      ref="veoRef"
      class="u-video"
      :style="`object-fit: ${zoom};`"
      :src="src"
      :poster="veoPoster"
      :autoplay="autoplay"
      :controls="!originPlay&&controls"
      :loop="loop"
      :muted="autoplay || muted"
      :preload="preload"
      crossOrign="anonymous"
      @loadeddata="poster ? () => false : getPoster()"
      @pause="showPlay ? onPause() : () => false"
      @playing="showPlay ? onPlaying() : () => false"
      @click.prevent.once="onPlay"
      v-bind="$attrs">
      您的浏览器不支持video标签。
    </video>

起因：项目需要加一个视频播放功能，线上资源和网页url不是一个域名，导致跨域了无法播放，报错。“xxxx” has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

2024-7-31补录，有人问我组件为什么绑定这么多方法，我用的是自定义组件，稍微加了点样式和功能修改，需要的小伙伴可以看下面这个帖子：