javascript - 预检响应中的 Access-Control-Allow-Headers 不允许请求 header 字段 X-CSRFToken

Question

我正在尝试对 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();

我不太了解请求 header 的工作原理，所以我猜我没有正确设置 header 。有人可以指出我如何设置 header 来解决此问题的正确方向吗？

Answer 1

如果您要调用第三方服务器，对于预检请求，响应 header 应包含 Access-Control-Allow-Headers: X-CSRF-Token 摆脱你得到的错误。但我们无法控制它。

如果调用我们的服务器，它完全在我们的控制之下，您可以在其中添加Access-Control-Allow-Headers: X-CSRF-Token 在对您的飞行前请求的响应中，该请求类型为 OPTIONS 以防您发送 ajax将 crossDomain 参数设置为 true 的 jQuery 请求。