web-dev-qa-db-ja.com

リクエストヘッダーフィールドX-CSRFTokenは、プリフライトレスポンスのAccess-Control-Allow-Headersでは許可されていません

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

リクエストヘッダーのしくみがよくわからないので、ヘッダーを正しく設定していないと思います。ヘッダーを設定してこの問題を修正する方法について、誰かが私を正しい方向に向けることができますか？

javascriptxmlhttprequestcsrfaccess-controlrequest-headers
8
spotatoz

サードパーティのサーバーを呼び出す場合、プリフライトリクエストの場合、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とともに送信しています。

12
yottabytt