CDN Cname Cross domain issue in jwplayer caption

Question

I am using Jwplayer 6.8 and having my jwplayer setup in some server www.example.com.I am loading subtitles in vtt format from CDN d2cdnserver.cloudfront.com( cname - example.amazon.com, I am loading my subtitle using cname ) , It is throwing cross domain error.

Source Link : Jwplayer crossdomain Issue

I have to added response header in server end, in httpd.conf, php.ini and htaccess file but it does not seems to work. I was accessing my files through cname example.amazon.com, When I change this cname to my amazon S3 url ("https://s3.amazonaws.com/www.abcdef.com/files/myfiles"), it works and cross domain issue is not coming even without setting the access-control-allow-origin in cdn but if I use cloudfront cname then it always shows crossdomain error and file is not loaded.

How to resolve this problem in CDN and CNAME? Is there some way to allow access-control-allow-origin for cname?

BTW, I have tried allow access-control-allow-origin for CDN . It didn`t help for cloudfront cname.

My AWS CORS Configuration

At First, Both https://s3.amazonaws.com/www.abcdef.com/files/myfiles and cname example.amazon.com throws cross domain error

But when I tried default configuration below

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

AWS url https://s3.amazonaws.com/www.abcdef.com/files/myfiles works and only cname example.amazon.com throws cross domain error

I also tried below configuration and it still results in same error, cname is still throwing the cross domain error

<CORSConfiguration>  
       <CORSRule>    
           <AllowedOrigin>http://*.example.com</AllowedOrigin>

       <AllowedMethod>PUT</AllowedMethod>    
       <AllowedMethod>POST</AllowedMethod>    
       <AllowedMethod>DELETE</AllowedMethod>

       <AllowedHeader>*</AllowedHeader>  
       </CORSRule>  

       <CORSRule>
         <AllowedOrigin>*</AllowedOrigin>    
         <AllowedMethod>GET</AllowedMethod> 
       </CORSRule> 
</CORSConfiguration>

Am I doing something wrong ? What is the correct way to do this configuration to avoid the cross domain issue ?

---

MY JWPLAYER SETUP

This is working

 function videoSetUp(id, skinName){
             jwplayer('player'+id).setup({
             file: 'http://example.amazon.com/files/test.mp4',
             image: 'https://www.longtailvideo.com/content/images/jw-player/lWMJeVvV-876.jpg',
             stretching : 'exactfit',
             aspectratio: '4:3',
             fallback: 'false',
             height:270,
             width:480,
             primary: 'HTML5',
             tracks: [
                { file: "https://s3.amazonaws.com/www.abcdef.com/files/jwplayer_test_eng.vtt", label: "Eng", kind: "subtitles" },
                { file: "https://s3.amazonaws.com/www.abcdef.com/files/jwplayer_test_hak.vtt", label: "China", kind: "subtitles" },
                { file: "https://s3.amazonaws.com/www.abcdef.com/files/jwplayer_test_tam.vtt", label: "Tamil", kind: "subtitles" },
                { file: "https://s3.amazonaws.com/www.abcdef.com/files/jwplayer_test_eng.vtt", label: "Hindi", kind: "subtitles" }
            ],
             skin :'./skins/'+skinName+'.xml'
             });

This is not working

 function videoSetUp(id, skinName){
             jwplayer('player'+id).setup({
             file: 'http://example.amazon.com/files/test.mp4',
             image: 'https://www.longtailvideo.com/content/images/jw-player/lWMJeVvV-876.jpg',
             stretching : 'exactfit',
             aspectratio: '4:3',
             fallback: 'false',
             height:270,
             width:480,
             primary: 'HTML5',
             tracks: [
                { file: "http://example.amazon.com/files/jwplayer_test_eng.vtt", label: "Eng", kind: "subtitles" },
                { file: "http://example.amazon.com/files/jwplayer_test_hak.vtt", label: "China", kind: "subtitles" },
                { file: "http://example.amazon.com/files/jwplayer_test_tam.vtt", label: "Tamil", kind: "subtitles" },
                { file: "http://example.amazon.com/files/jwplayer_test_eng.vtt", label: "Hindi", kind: "subtitles" }
            ],
             skin :'./skins/'+skinName+'.xml'
             });

Helpful Links :

Cross-origin_resource_sharing

how-to-add-an-access-control-allow-origin-header

access-control-allow-origin-multiple-origin-domains

configure-amazon-s3-for-cross-origin-resourse-sharing-to-host-a-web-font

amazon-s3-announces-cross-origin-resource-sharing-CORS-support

how-do-i-enable-cors-in-cdn

Amazon S3 CORS (Cross-Origin Resource Sharing)

Thanks for Help

Answer 1

Thanks for commenting on my question for help.

I'll take a blind stab in the dark here, just at your CORS configuration. I'm not exactly sure how CNAME alias changes anything. So forgive me, as I'm not familiar with jwplayer too.

This is your current CORS Policy configuration:

<CORSConfiguration>  
   <CORSRule>    
       <AllowedOrigin>http://*.example.com</AllowedOrigin>
       <AllowedMethod>PUT</AllowedMethod>    
       <AllowedMethod>POST</AllowedMethod>    
       <AllowedMethod>DELETE</AllowedMethod>

       <AllowedHeader>*</AllowedHeader>  
   </CORSRule>  

   <CORSRule>
     <AllowedOrigin>*</AllowedOrigin>    
     <AllowedMethod>GET</AllowedMethod> 
   </CORSRule> 
</CORSConfiguration>

The probable errors I see is in the first <CORSRULE> group.

The first <AllowedOrigin> should be the website that is accessing your bucket resources. For example, if you're on website http://domain1.example.com to access your bucket (Shouldn't matter whether it is CNAME or not). Set both origins as the request's source:

<AllowedOrigin>http://example.com</AllowedOrigin>
<AllowedOrigin>http://*.example.com</AllowedOrigin>

Second issue is your <AllowedMethod>. You should find out from a browser's developer panel (I'm not sure whether jwplayer hides the requests) about the type of HTTP requests jwplayer sends to your S3 bucket server. Most likely it should be HTTP GET. Therefore, you need this line in your first <CORSRule> group:

<AllowedMethod>GET</AllowedMethod>

Third, let's look at your HTTP Headers that jwplayer sends to the server. The first try at <AllowedHeader> you put Authorization first, but you should check in the browser's developer panel on what type of HTTP Header it is firing at the server. Try this first with only:

<AllowedHeader>*</AllowedHeader>

As I noted in my answer from the other question that <AllowedOrigin>*</AllowedOrigin> is not allowed and ignored in CORS the settings.

So, those settings you've set with * only, do try to set it more specific if it doesn't work the first time round e.g. Content-*

I hope I had helped a little without causing further confusion. Good luck.