外链引用含有 origin 时, 产生 CORS 报错的问题..

[zkeq]

描述

当请求标头不含有 origin 参数时 , 可正常加载相关资源

但是如果请求标头含有 origin 参数时, 会报错 CORS : CORS Missing Allow Origin Header

复现

https://belief-pro.zkeq.xyz/test

(问题复现内页有详细说明...)

---

可能我之前遇到的也是这个问题?..

#300 Solve the PDF.Js problem : CORS Missing Allow Origin.

[myl7]

在第二个无法正常加载的视频的 <video> 里用了 crossorigin="anonymous"，所以这个 video 的请求启用了 CORS protocol，而此项目的 raw link 靠的是 redirect，redirect 在 CORS preflight request 来时没有 Access-Control-Allow-* headers，所以视频就被 CORS block 了。（个人感觉跟 Origin 倒是关系不大。）
只要没 crossorigin attribute（必须没有不能为空）就不会启用 CORS protocol，也就不会有问题，所以应该影响不大。不过考虑到设个 crossorigin="anonymous" 也还算正常操作，我建议给 raw link 部分加个 Access-Control-Allow-Origin: * 和 Access-Control-Allow-Methods: GET。

[zkeq]

感谢大佬指正

尝试在 dplayer 源码 中 搜索并删除 crossorigin="anonymous" 代码 后

视频可以正常播放了,但此时字幕会出现无法加载的问题.... 🙏

(字幕文件是托管在多吉云上的,应该没问题吧..)

（已屏蔽：来源）

问题复现见: https://belief-pro.zkeq.xyz/test-fix-1

[myl7]

参见 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track#:~:text=This%20attribute%20must%20be%20specified%20and%20its%20URL%20value%20must%20have%20the%20same%20origin%20as%20the%20document%20%E2%80%94%20unless%20the%20%3Caudio%3E%20or%20%3Cvideo%3E%20parent%20element%20of%20the%20track%20element%20has%20a%20crossorigin%20attribute. :

This attribute must be specified and its URL value must have the same origin as the document — unless the or

所以字幕这个跨域的 <track> 要求 <video> 有 crossorigin 不然不工作，而 <video> 有 crossorigin 的话又要应用 CORS protocol 导致 video src 无法加载

那还是只能直接给 raw link 加那两个 header 了……

[zkeq]

感谢大佬帮忙解答...

也就是 字幕 需要这个属性.. 但是加了这个属性之后

<video>中的 src 会因为加了这个属性而不加载..

所以在前端页面中 不可兼得. 期待大佬们的此功能添加...

[zkeq]

大佬我悟了, 直接把vtt 文件放在网站目录上就可以了

也就是同源了

类似这样的 http://belief-pro.zkeq.xyz/vtt/test.vtt

谢谢大佬帮忙解答......

正常工作测试网址: https://belief-pro.zkeq.xyz/test-done

[myl7]

See PR #315

[zkeq]

✨ Wow, I follow up deployed your PR, I think this is one of the most ideal solution!