1

I'm new to AJAX and I have the following code:

function get_filesize(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open("HEAD", url, true); 

xhr.onreadystatechange = function() {
    if (this.readyState == this.DONE) {
        callback(parseInt(xhr.getResponseHeader('Access-Control-Allow-Credentials')));
    }
};
xhr.send();
}

get_filesize("http://fileraja.com/download/?songURL=./Tamil/K/Kaththi_160kbps/Pakkam_Vanthu-StarMusiQ.Com.mp3", function(size) {
var estimatedtime = (new Date().getTime())/size;
var time = new Date(estimatedtime);
console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());
});

When I run this code, I get an error like:

 XMLHttpRequest cannot load http://fileraja.com/download/?songURL=./Tamil/K/Kaththi_160kbps/Pakkam_Vanthu-StarMusiQ.Com.mp3. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

After some research, I have found that it's due to the CORS policy, so I tried adding the code xhr.setRequestHeader("Access-Control-Allow-Credentials",true);, but it didn't help me.

How can I get rid of this error?

hon2a
  • 7,006
  • 5
  • 41
  • 55
lovejs
  • 35
  • 1
  • 4

2 Answers2

0

After some search i have found that its due to CORS policy...so i have tried adding the code...

You can't do anything client-side that will change the CORS policy of the server. This is the point of the SOP and CORS: The server determines whether to allow any particular client to grab its content via ajax.

So unless http://fileraja.com are willing to add the relevant CORS headers at their end, you simply cannot do cross-origin requests to their domain with ajax. You might ask them, or ask if they offer a JSONP API (JSONP isn't subject to the SOP, because it's not ajax). Otherwise, you'll have to use a server of your own to proxy the request.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • will it work if i add headers as @Knight rider suggests – lovejs Dec 13 '14 at 10:56
  • @lovejs: Again: There's nothing you can do from the client that changes this. CORS has to be enabled **on the server**. – T.J. Crowder Dec 13 '14 at 10:57
  • thanks ..but can you tell me how can i defined a header in ajax ?? – lovejs Dec 13 '14 at 11:01
  • @lovejs: Using the method you used in your question, [`setRequestHeader`](http://www.w3.org/TR/XMLHttpRequest/#the-setrequestheader()-method). But note that the header you're trying to set in your question is a **response** header, not a request header (and if you were going to set it, you'd want the value `"true"`, not `true`). – T.J. Crowder Dec 13 '14 at 11:05
  • i have used the method you suggested by using `xhr.setRequestHeader("Access-Control-Allow-Credentials",true);` and using like `xhr.getResponseHeader('Access-Control-Allow-Origin')` but it throws me the same error – lovejs Dec 13 '14 at 12:50
  • @lovejs: What part of "you can't do this on the client" do you not understand?! – T.J. Crowder Dec 13 '14 at 12:51
  • will i be able to fetch the data if they provide jsonp facility – lovejs Dec 13 '14 at 12:53
  • @lovejs: Yes, via JSONP (which is not ajax). – T.J. Crowder Dec 13 '14 at 13:02
0

This error is because of the CORS(Cross Origin Resource Sharing) Policy which does not allow requests that do not arise from the same origin. A header Access-Control-Allow-Headers: * can be set at the resource to allow all requests.

Other methods include JSONP as mentioned by T.J Crowder and the same server for proxy request.

This might be a good read CORS and POST Request

Community
  • 1
  • 1
Knight Rider
  • 186
  • 10
  • how can i set up a header in js ?? – lovejs Dec 13 '14 at 10:54
  • You cannot! the service or API that you call should have it in it's header..Change the Content type to JSONP in your call – Knight Rider Dec 13 '14 at 11:01
  • i have added `xhr.setRequestHeader("jsonp")`..is it the way of doing this ?? – lovejs Dec 13 '14 at 11:06
  • Nopes, xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); oReq.setRequestHeader("Content-Type", "text/xml"); Use: xmlhttp.setRequestHeader(key, value); READ http://stackoverflow.com/questions/1268673/set-a-request-header-in-javascript – Knight Rider Dec 13 '14 at 11:30
  • Access-Control-Allow-Headers: * this is written in Service that you call, you have to write xhr.setRequestHeader("Content-Type", "application/jsonp"); – Knight Rider Dec 13 '14 at 12:58