unsafe attempt to load url from frame with url . domains, protocols and ports must match

Question

I'm currently developing a Java Application using SpringMVC, JavaScript, Jquery, one of our requirement is to add vtt format subtitle to our video. for this part, I used a track tag in html 5 to do it, and the code is below:

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>';

we saved our video and subtitle in S3, I have added CROS policy for our S3 already, and it works. it does reply allow cross origin header as *.

At the beginning, it works, video and subtitles both work good,

but one weird thing happens after we did some changes in our video service project, we used Akamai cdn for the link instead of the directly S3 link for videos, we deploy the projects to two different test environments, and then, the video with subtitle can not always work well in Chrome, but works well in Firefox and Safari, I used to suspect that it's the problem in S3, but it works good in safari and Firefox, so I think it should be the issue in my code.

I tried to delete crossorigin attribute in the video tag, the video also can load well in Chrome.

For the video part work flow: we are a retail company, so video is used the user used for their reviews, after a user upload a new video, it will be converted in S3 via lambda first, then it will used another lambda to get vtt subtitle and save it in our s3.

the CROS policy I set up in our S3 is below:

<?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>

I really hope someone can help me solve this problem in Chrome, In my opinion, I think crossorigin attribution is the reason to cause the problem, so I'm wondering, is there any way to put the subtitle without crossorigin? and more stable in Chrome, Firefox, and Safari?

Thanks!