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

Frow

Checking your link now it works fine? – Milurd

@EthanJWPlayer :now the same problem is coming with xml skin file ? I have checked this link support.jwplayer.com/customer/portal/articles/… and also added crossdomain.xml in my server example.abcd.com/crossdomain.xml , my skin file is loading from cloudfront having url cdn.abcd.com/bekel.xml – Frow

Where is this running? – Milurd

I cant share the url, but can you give me general idea to at least find the issue ... i have my skin in cloudfront and i am loading it from my domain in jwplayer setup` skin:cdn.amazon.com/bekel.xml i am getting this error XMLHttpRequest cannot load http://example.amazon.com/files/jwplayer/skins/bekle.xml. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://abcde' is therefore not allowed access. – Frow

Generally, that means there is a CORS issue - enable-cors.org – Milurd

I have already done CORES conf as suggested in this question answer could there be some other issue, or else I will check the CORE configuration again and check – Frow

I really need to see the link to debug properly at this point then. – Milurd

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.

Lingerie

Thanks @Lingerie : it does help, only one question <AllowedOrigin>example.com</AllowedOrigin> <AllowedOrigin>http://*.example.com</AllowedOrigin> ......Do i have to set both or only .... one <AllowedOrigin>http://*.example.com</AllowedOrigin> is enough – Frow

@hitesh it depends on your source website that is calling the resource from the bucket. For my case, I have both http://example.com and http://www.example.com pointing to the webpage on the same server which serves resource from S3 bucket. So, for you, if your webpage with jwplayer that is calling the S3 bucket resource only exists in http://example.com, then you only need to set that one domain origin. – Lingerie

it has more than one ... like example.com and devabc.example.com , devdef.example.com etc. similarly more links are there in same domain. So Will it not work if i give only <AllowedOrigin>http://*.example.com</AllowedOrigin> or do i have to include <AllowedOrigin>example.com</AllowedOrigin> .... this as well – Frow

@hitesh Include both for the base domain example.com, and the *.example.com for the subdomains. Please remember to look at the protocol whether you need to include http:// or https://. – Lingerie