在预检响应中，Access-Control-Allow-Headers不允许请求头字段X-CSRFToken

Posted 2021-04-16

我正在尝试对GroupMe API进行API调用以获取JSON响应，但是一直收到以下错误：

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

我的javascript看起来像这样：

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();

我真的不明白请求标头是如何工作的所以我猜我没有正确设置标头。有人能指出我如何设置标题来解决这个问题吗？

答案

如果您正在调用第三方服务器，对于预检请求，response header应包含Access-Control-Allow-Headers: X-CSRF-Token以消除您获得的错误。但我们无法控制它。 如果调用我们的服务器完全在我们的控制之下，你可以在你的预检请求的响应中添加Access-Control-Allow-Headers: X-CSRF-Token，类型为OPTIONS，以防你发送ajax jQuery request和crossDomain parameter set to true。