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?

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?

• javascript
• xmlhttprequest
• csrf
• access-control
• request-headers

• you don't need to mess with those headers from the client, those are server response headers. make sure your server is whitelisting X-CSRFToken in ACAH if it's part of the response. – dandavis Commented Nov 17, 2015 at 7:29
• 1 oh, and we JSers don't actually make a preflight either, the browser does that for us and lets our "regular-ass" ajax work if it passes... – dandavis Commented Nov 17, 2015 at 7:42

1 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.