發送帶有自定義標頭的純Ajax HTTP請求

Question

我有一個現有的Java客戶端，其上是IOS，andriod開發人員准備了一個基於http請求的簡單應用程序。 並試圖在HTML5應用中實現相同目標。

現在面臨的困難是在AJAX請求中發送自定義標頭，例如具有加密登錄詳細信息的授權。

我試圖在各種REST客戶端上實現相同的目標，並且能夠在請求標頭中發送“ AUTHORIZATION：BASIC XXXXXX =“。 並獲得正確的json響應”

但是，如果我嘗試使用ajax調用，則無法發送類似的請求標頭。 請求以OPTIONS而不是GET的形式發送，並且授權標簽不能作為標頭正常運行，而是作為“ Access-Control-Request-Headers：authorization”發送。

這是我嘗試過的片段

 <script>
    //$.ajaxSetup({ headers: { 'Authorization': 'Basic XXXXXXX='} })


    // get form data for POSTING       
    var vFD = new FormData(document.getElementById('upload_form'));
    var oXHR = new XMLHttpRequest();
    oXHR.open('POST', "https://123.123.123.123:229/");
    //oXHR.send(vFD);



    var body = 'Basic XXXXXXX=';
    var mUrl = "https://123.123.123.123:229/?json";
    var client = new XMLHttpRequest();
    client.open('GET', mUrl, true);
    client.withCredentials = true;
    client.crossDomain = true,

    client.setRequestHeader('Authorization', 'Basic XXXXXXX=');
    client.send(body);



    simpleHttpRequest();
    function simpleHttpRequest() {
        alert("calling ");

        var headers = {
            "Authorization": "Basic XXXXXXX="
        };
        $.ajaxSetup({ "headers": headers });
        $.ajaxSetup({ 'cache': false });
        $.ajax({
            type: "GET",
            withCredentials: true,
            //                data: {
            //                    address: 'http://www.google.com'
            //                },
            crossDomain: true,
            Headers: { "Authorization": "Basic XXXXXXX=" },
            dataType: "jsonp",
            url: mUrl,
            cache: false
        });
    }

    xhrToSend();
    function xhrToSend() {
        // Attempt to creat the XHR2 object
        var xhr;
        try {
            xhr = new XMLHttpRequest();
        } catch (e) {
            try {
                xhr = new XDomainRequest();
            } catch (e) {
                try {
                    xhr = new ActiveXObject('Msxml2.XMLHTTP');
                } catch (e) {
                    try {
                        xhr = new ActiveXObject('Microsoft.XMLHTTP');
                    } catch (e) {
                        statusField('\nYour browser is not' +
                    ' compatible with XHR2');
                    }
                }
            }
        }
        xhr.withCredentials = true;
        xhr.open('GET', mUrl, true);
        xhr.setRequestHeader("Authorization", "numberOfBLObsSent");
        xhr.send();
    };
</script>

並且所有不同的方式都失敗了。 請幫我。

提前致謝。

Answer 1

該問題與請求的跨域性質有關。 當您發出包含自定義標頭的跨域請求時，該請求首先通過OPTIONS方法“預檢”到服務器，並且服務器必須以標頭Access-Control-Allow-Headers: your-custom-header響應Access-Control-Allow-Headers: your-custom-header 。 一旦接收到此消息，ajax客戶端將（自動）發出實際請求。

有關預檢請求的更多信息