Sending plain ajax HTTP request with custom header

Question

I have an existing java client on top of which IOS, andriod developers prepared a simple http request based applications. And am trying to achieve same in HTML5 app.

And the difficulty right now am facing is sending an custom header within the AJAX request like authorization with encrypted login details.

I tried to achieve same on various REST clients and able to send "AUTHORIZATION : BASIC XXXXXX=" in request header. And getting proper json response"

But if i try same using ajax call am not able to send similar request header. Request sending as OPTIONS instead of GET and the authorization tag is not going properly as a header instead it's going as "Access-Control-Request-Headers:authorization".

and here is the snippets i have tried.

 <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>

And all the different ways getting failed. Please help me.

Thanks in advance.

Answer 1

The issue is related to the cross-domain nature of the request. When you make a cross-domain request which contains custom headers, the request is first "preflighted" to the server via the OPTIONS method, and the server must respond with a header Access-Control-Allow-Headers: your-custom-header. Once this is received, the ajax client will then (automatically) issue the actual request.

More on preflighted requests