Request header field X-CSRFToken is not allowed by Access-Control-Allow-Headers in preflight response

Question

I'm trying to make an API call to the GroupMe API to fetch a JSON response but have been getting the following error:

XMLHttpRequest cannot load ...(call url)... 
Request header field X-CSRFToken is not allowed by Access-Control-Allow-Headers in preflight response.

My Javascript looks like this:

var xmlhttp = new XMLHttpRequest();
var url = (call url)

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

    xmlhttp.open("GET", url, true);
    xmlhttp.setRequestHeader("Access-Control-Allow-Headers", "*");
    xmlhttp.setRequestHeader('Access-Control-Allow-Origin', '*');

    $.getJSON(url, function(data){
        var array = data.response.messages.reverse();
        for(i = 0; i<array.length; i++){
            $('.messages').append("<div class='message'>"+array[i].name+":<br>"+array[i].text+"</div>");
        }
    });
    }
}

xmlhttp.open("GET", url, true);
xmlhttp.send();

I don't really understand how request headers work so I am guessing I'm not setting the headers correctly. Can someone point me in the right direction as to how I can set the headers to fix this issue?

Answer 1

    If you are making a call to a third party server, for the preflight request, the response header should contain Access-Control-Allow-Headers: X-CSRF-Token to get rid of the error you get. But we do not have control over it.

    It is totally under our control if the call is made to our server, where you can add Access-Control-Allow-Headers: X-CSRF-Token in the response to your preflight request which is of type OPTIONS in case if you are sending a ajax jQuery request with crossDomain parameter set to true.