3

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();
Altanai
  • 1,323
  • 1
  • 19
  • 33
  • 1
    CORS, for the most part, is something the server does, there's nothing you need to do client-side to make it work, and nothing you can do client-side to make it work. There are some exotic pre-flighted and authenticated cleint-side edge-cases, but for the most part, a server implementing CORS means that plain old ajax code just works. at any rate, 'Access-Control-Allow-Origin' is never something you should be setting in an ajax call. in short: if it doesn't work already, it never will. – dandavis Feb 23 '15 at 11:16
  • !! well i aint ready for defeat yet . dandavis . nevertheless thanks for commenting – Altanai Feb 23 '15 at 11:27
  • 1
    Response code 405 means "method not allowed", which seems suspicious for a "GET" request. It seems like probably a server configuration issue. You can probably solve this, since it sounds like you control the server. Try to get a look at the actual headers being returned by the server. Browsers usually have a way to do this in their developer tools. And you probably don't need to set headers in your request. – aldel Feb 24 '15 at 00:16
  • Also, as stated, this question really has nothing to do with html5-video. It's just fetching a chunk of data. If you had a ` – aldel Feb 24 '15 at 00:21
  • 1
    If you can, put javascript file in the same server as mp4 and in your html file say `` it should override cross origin issue. – Nirbhay Kundan Feb 24 '15 at 04:25
  • Nirbhay Kundan : tried that-> 405 failed . Made scripts and kept them on server near to the video resource . Made a html file and script src to the server side js scripts also made ajax calls . It renders " XMLHttpRequest cannot load – Altanai Feb 24 '15 at 10:16

0 Answers0