CODEWITHSUNDEEP
javascriptcors
raj
raj

Reputation: 29

Setting CORS headers does not work in Chrome, Firefox or on mobile browser

I am trying to consume a third party's response. Its working fine in IE but not working in Chrome, Firefox or on my mobile browser. I google and tried some codes but still facing same issue. I know its CORS error and there are lots of references or tutorials are available, I want to know why my code is not working, whats the error?

var xhr = new XMLHttpRequest();
        xhr.open("GET", "http://api.<third_party_sitename>.com/json/feeds?system=" + abc);
        xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
        xhr.setRequestHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, HEAD");
        xhr.setRequestHeader("Access-Control-Allow-Headers", "X-Requested-With");
        xhr.setRequestHeader("Access-Control-Max-Age", "1728000");
        //xhr.setRequestHeader("Connection", "Keep-Alive");
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.onreadystatechange = function () {
            if (this.readyState == 4) {
                var datax = JSON.stringify(this.responseText);
                var jsonObj = jQuery.parseJSON(datax);

                 displayPin(jsonObj);

            }
        };
        xhr.send(null);

Upvotes: 0

Views: 630

Answers (1)

Quentin
Quentin

Reputation: 943556

Access-Control-Allow-Origin and co are response headers. The server you are making the request to (api.<third_party_sitename>.com) has to set them in the response.

They are not request headers. Your JavaScript can't give itself permission to read data from arbitrary third party sites.

Upvotes: 2

Related Questions