Jquery 尝试从具有url的框架加载url时不安全。域、协议和端口必须匹配

我目前正在使用SpringMVC、JavaScript、Jquery开发一个Java应用程序， 我们的要求之一是在视频中添加vtt格式的字幕。 对于这一部分，我在HTML5中使用了一个track标记，代码如下：

sb += '<div class="fileinput fileinput-preview videoDiv"  style="width: 320px;margin-right: 0px;" id="video'+videoData.videoId+'" ><video id="preview'+videoData.videoUrl +'"  src='+ videoData.videoUrl+' controls style="object-fit: fill;width: 100%; " crossorigin="anonymous"><track src="'+videoData.subtitlesUrl+'" kind="subtitles" srclang="en" label="English" default> </video></div>';

sb+=''；

我们在S3中保存了我们的视频和字幕，我已经为S3添加了CROS策略，并且可以正常工作。它不允许将跨原点标头回复为*

一开始，它很管用，视频和字幕都很管用

但在我们对视频服务项目做了一些更改后，发生了一件奇怪的事情，我们使用Akamai cdn作为链接，而不是直接使用S3链接作为视频，我们将项目部署到两个不同的测试环境中，然后，带字幕的视频在Chrome中并不总是运行良好，但在Firefox和Safari中运行良好，我曾经怀疑这是S3中的问题，但它在safari和Firefox中运行良好，因此我认为这应该是我代码中的问题

我试图删除视频标签中的crossorigin属性，视频也可以在Chrome中很好地加载

对于视频部分的工作流程：我们是一家零售公司，因此视频被用于用户的评论，在用户上传新视频后，它将首先通过lambda在S3中转换，然后它将使用另一个lambda获得vtt字幕并保存在我们的S3中

我在S3中制定的CRO政策如下：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>ETag</ExposeHeader>
  </CORSRule>
</CORSConfiguration>

*
头
得到
放
邮递
删除
*
埃塔格

我真的很希望有人能帮我解决Chrome中的这个问题，在我看来，我认为跨源属性是导致这个问题的原因，所以我想知道，有没有办法把字幕放在没有跨源的地方？在Chrome、Firefox和Safari中更稳定

谢谢