预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 X-CSRFToken答案

【问题标题】：Request header field X-CSRFToken is not allowed by Access-Control-Allow-Headers in preflight response预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 X-CSRFToken
【发布时间】：2016-02-18 11:38:02
【问题描述】：

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

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

【问题讨论】：

您不需要弄乱来自客户端的那些标头，那些是服务器响应标头。如果它是响应的一部分，请确保您的服务器在 ACAH 中将 X-CSRFToken 列入白名单。
哦，我们 JSers 实际上也不会进行预检，浏览器会为我们做这些，如果通过了，我们的“常规”ajax 就可以工作......

标签： javascript xmlhttprequest csrf access-control request-headers

【解决方案1】：

如果您正在调用第三方服务器，对于预检请求，response header 应包含 Access-Control-Allow-Headers: X-CSRF-Token 以消除您遇到的错误。但我们无法控制它。

如果对我们的服务器进行调用，这完全在我们的控制之下，您可以在其中添加 Access-Control-Allow-Headers: X-CSRF-Token 在对您的预检请求的响应中，该请求类型为 OPTIONS，以防您发送带有 crossDomain parameter set to true 的 ajax jQuery request。

【讨论】：

谢谢！添加 Access-Control-Allow-Headers: X-CSRF-Token, Content-Type 成功了！
我应该把这个放在 axios 哪里？
@ßiansorÅ.Ålmerol 你不能（实际上你可以，但它不起作用），在服务器中添加标题。您应该收到此标头，而不是发送它