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"

enter image description here

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.

levi · Accepted Answer · 2013-12-16 16:10:02Z

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.

2 Comments

Pavan N Over a year ago

Thanks for the response. I understood it is coz of CORS but why its working in my REST, HTTP browser clients and mobile apps. but not in my AJAX calls?

levi Over a year ago

Cross-domain policy is not part of HTTP, its a feature web-browsers implement for increased security. Hence, only web-browsers are subject to the rules of cross-domain.

Collectives™ on Stack Overflow

Sending plain ajax HTTP request with custom header

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related