Unable to access partial video content through CORS to amazon EC2

425 Views Asked by At

I have tried my best to use the already available answers on stackoverflow for this and haven't been successful since 2 days . What I am trying to do is access a Mp4 video stored in amazon Ec2 instance . this results in

XMLHttpRequest cannot load No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 405.

My ngnix.conf has the headers like

http{
       ............
        server{
                location / {
                        if ($request_method = 'OPTIONS') {
                                add_header 'Access-Control-Allow-Origin' '*';
                                add_header 'Access-Control-Allow-Credentials' 'true';
                                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                                add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
                                add_header 'Access-Control-Max-Age' 1728000;
                                add_header 'Content-Type' 'text/plain charset=UTF-8';
                                add_header 'Content-Length' 0;
                                return 204;
                        }
                        if ($request_method = 'POST') {
                                add_header 'Access-Control-Allow-Origin' '*';
                                add_header 'Access-Control-Allow-Credentials' 'true';
                                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                                add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
                        }
                        if ($request_method = 'GET') {
                                add_header 'Access-Control-Allow-Origin' '*';
                                add_header 'Access-Control-Allow-Credentials' 'true';
                                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                                add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
                        }
               }
       }


}

My client javascript code is simple as follows :

var createCORSRequest = function(method, url) {
      var xhr = new XMLHttpRequest();
      if ("withCredentials" in xhr) {
        // Most browsers.
        xhr.open(method, url, true);

        xhr.setRequestHeader('Access-Control-Allow-Methods', "HEAD, GET, POST, PUT, DELETE, OPTIONS");
        xhr.setRequestHeader('Content-type', 'text/plain');
        xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
      }  else {
        // CORS not supported.
        xhr = null;
      }
      return xhr;
    };

    var url = <videoURL> ;
    var method = 'GET';
    var xhr = createCORSRequest(method, url);

    xhr.onload = function() {
      // Success code goes here.
    };

    xhr.onerror = function() {
      // Error code goes here.
    };

    xhr.send();
0

There are 0 best solutions below