XMLHttpRequest cannot load Request header field Content-Type is not allowed by Access-Control-Allow-Headers

Question

I have an jquery ajax call ,by which i am trying to get data from the external API in json data format.Here is my code..

$("#click").click(function () {

                $.ajax({
                    type: "POST",
                    url: "http://pnrbuddy.com/api/check_pnr/pnr/2156641988/format/json/pbapikey/6b17f33e25e2d8197462d1c6bcb0b130/pbapisign/bd0aea241e88c8a22692eba02887ad97a220f827",
                    contentType: "application/json",
                    async: false,
                    success: function (data) {
                        $("#response").html(data.d);
                    }

                });
            });

When i am clicking on the button neither any value not any response is coming into firebug in mozill.When trying to execute in chrome getting error as..

XMLHttpRequest cannot load http://pnrbuddy.com/api/check_pnr/pnr/2156641988/format/json/pbapikey/6b17f…5e2d8197462d1c6bcb0b130/pbapisign/bd0aea241e88c8a22692eba02887ad97a220f827. Request header field Content-Type is not allowed by Access-Control-Allow-Headers. 

Please help me.. Thanks in advance..

Answer 1

Here is your working Ajax. I tested it and it gives information correctly about pnr enquiry.

$.ajax({
 type: "GET",
 crossDomain:true,
 url: "http://pnrbuddy.com/api/check_pnr/pnr/2156641988/format/json/pbapikey/6b17f33e25e2d8197462d1c6bcb0b130/pbapisign/bd0aea241e88c8a22692eba02887ad97a220f827", 
 success: function (data) { 
    alert(data.pnr); // result - 2156641988
    alert(data.train_num); // result - 14208
    alert(data.train_name); // result - PADMAVAT EXPRES 
 } 
}); 

Answer 2

In the server side you should add an .htaccess in this directory with this content:

Header set Access-Control-Allow-Origin: *

Header set Access-Control-Allow-Headers: content-type

Header set Access-Control-Allow-Methods: *