CORS problem with Nginx, Tomcat, and Shaka

[Pierpaolo1992]

Hi everyone, i'll explain you my problem. With reference to #628 (comment), i've created an .mp4 segmentated and crypted video using Shaka Packager. All these contents are provided by a Tomcat Container, on port 8080.
When i browse with http://localhost:8080/shaka-player-master/demo/index1.html (browser Firefox 50.1.0, Chrome Version 55.0.2883.75 (64-bit)), it plays correctly my content.
In fact, with the following snippet

{
    name: 'Sintel 4k (multicodec, Widevine)',
    manifestUri: '//localhost:8080/shaka-player-master/media/example-av.mpd',  // gjslint: disable=110

    encoder: shakaAssets.Encoder.SHAKA_PACKAGER,
    source: shakaAssets.Source.SHAKA,
    drm: [shakaAssets.KeySystem.WIDEVINE],
    features: [
      shakaAssets.Feature.HIGH_DEFINITION,
      shakaAssets.Feature.MP4,
      shakaAssets.Feature.PSSH,
      shakaAssets.Feature.SEGMENT_BASE,
      shakaAssets.Feature.SUBTITLES,
      shakaAssets.Feature.ULTRA_HIGH_DEFINITION,
      shakaAssets.Feature.WEBM,
      shakaAssets.Feature.WEBVTT
    ],

    licenseServers: {
      'com.widevine.alpha': '//widevine-proxy.appspot.com/proxy'
    }
  },

reproduces correctly contents.
-The first problem occurs when i replace
" manifestUri: '//localhost:8080/shaka-player-master/media/example-av.mpd', // gjslint: disable=110"

with " manifestUri: '//:172.17.0.18080/shaka-player-master/media/example-av.mpd', // gjslint: disable=110" ,

where 172.17.0.1 is the default docker0 interface. Browser can't reproduce content, and show the following error:

Shaka Error NETWORK.HTTP_ERROR (http://172.17.0.1:8080/shaka-player-master/media/example-av.mpd)

Here there's console log:

Player error Object { category: 1, code: 1002, data: Array[1], message: "Shaka Error NETWORK.HTTP_ERROR (htt…", stack: "shaka.util.Error@http://172.17.0.1:…" } main.js:199:3
shakaDemo.onError_ http://172.17.0.1:8080/shaka-player-master/demo/main.js:199:3
shakaDemo.load/< http://172.17.0.1:8080/shaka-player-master/demo/asset_section.js:189:7

This is my first problem, i don't know why there is this error, in fact GET /path/example-av.mpd returns 200 OK.

-Second problem occurs in this case: i want using an nginx container as proxy cache (on port 9000 host-->80 container): here is /etc/nginx/conf.d/default.conf configuration file:

proxy_cache_path /tmp/nginx levels=1:2 keys_zone=my_zone:10m inactive=60m;
proxy_cache_key "$scheme$request_method$host$request_uri";
proxy_cache_methods GET HEAD POST;
proxy_cache_valid 200 100m;
proxy_ignore_headers Set-Cookie;

server {
    listen       80;
    server_name  172.17.0.1;

    #charset koi8-r;
    #access_log  /var/log/nginx/log/host.access.log  main;

    location / {
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}


    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}

    location /demo/ {

    proxy_cache my_zone;
    add_header X-Proxy-Cache             $upstream_cache_status;
    proxy_set_header X-Real-IP           $remote_addr;
    proxy_set_header X-Forwarded-For     $remote_addr;

    proxy_set_header Host                $host;

    proxy_pass http://172.17.0.1:8080/shaka-player-master/demo/index1.html ;

    }
}

In few world, then i browse 172.17.0.1:9000/demo/, it will redirect, in case of cache MISS (the first time), to http://172.17.0.1:8080/shaka-player-master/demo/index1.html ... so it will reproduces content i choose. Note that in index1.html there is a js (assets.js, see here with the same form of the previous snippet:

{
    name: 'Sintel 4k (multicodec, Widevine)',
    manifestUri: '//localhost:8080/shaka-player-master/media/example-av.mpd',  // gjslint: disable=110

    encoder: shakaAssets.Encoder.SHAKA_PACKAGER,
    source: shakaAssets.Source.SHAKA,
    drm: [shakaAssets.KeySystem.WIDEVINE],
    features: [
      shakaAssets.Feature.HIGH_DEFINITION,
      shakaAssets.Feature.MP4,
      shakaAssets.Feature.PSSH,
      shakaAssets.Feature.SEGMENT_BASE,
      shakaAssets.Feature.SUBTITLES,
      shakaAssets.Feature.ULTRA_HIGH_DEFINITION,
      shakaAssets.Feature.WEBM,
      shakaAssets.Feature.WEBVTT
    ],

    licenseServers: {
      'com.widevine.alpha': '//widevine-proxy.appspot.com/proxy'
    }
  },

The result is.. there is the same error of problem #1!

Shaka Error NETWORK.HTTP_ERROR (http://172.17.0.1:8080/shaka-player-master/media/example-av.mpd)

Player error Object { category: 1, code: 1002, data: Array[1], message: "Shaka Error NETWORK.HTTP_ERROR (htt…", stack: "shaka.util.Error@http://172.17.0.1:…" } main.js:199:3
shakaDemo.onError_ http://172.17.0.1:8080/shaka-player-master/demo/main.js:199:3
shakaDemo.load/< http://172.17.0.1:8080/shaka-player-master/demo/asset_section.js:189:7

Also here there is a strange behaviour. When i browse localhost:9000/demo/ --> /path/to/page/index1.html, if index1.html download a js from here (line 381) the browser can reproduces default demo contents.
So there is a problem when i try to use nginx cache--> html in tomcat backend-->js that GET an mpd created by myself (with shaka-packager). But then i browse directly content from tomcat in browser, it will work (see problem #1).
I'm sorry for the long and detailed question. Can someone help me?

[joeyparrish]

This is most likely a CORS (Cross-Origin Resource Sharing) error. If you open the JS console, you should see some message about that from the browser. Here's where you can read more about CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

In short, when your page is hosted on one domain, and your resources are hosted on another, the server must supply special headers in the response. If it does not, the browser will deny access to that resource.

[Pierpaolo1992]

Thanks for your answer, @joeyparrish. So, can i could solde this problem?

[joeyparrish]

Yes, by adding the required headers on your server. Note that this is not a Shaka-specific requirement. This is something built into all modern browsers to prevent cross-site attacks.

For example, our demo content is meant to be accessed by anyone from any domain. To achieve this, we serve the content (both manifest & media) with these HTTP headers:

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: If-Modified-Since, Range, Origin

[Pierpaolo1992]

Thanks, @joeyparrish. So do i have to configure tomcat backend for adding the following HTTP response header?

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: If-Modified-Since, Range, Origin

How could i insert these header in HTTP response in tomcat container? Based on official docker tomcat image.

[joeyparrish]

Sorry, I'm here to support Shaka Player, not Tomcat or any other web server. You will have to refer to Tomcat documentation to learn how to configure it. I couldn't possibly keep up with every web server, and it would be more efficient for you to read the docs for yourself.

[Pierpaolo1992]

Thanks for your support, @joeyparrish