Pass request headers in a jQuery AJAX GET call

JqueryAjaxClient Side

Jquery Problem Overview


I am trying to pass request headers in an AJAX GET using jQuery. In the following block, "data" automatically passes the values in the querystring. Is there a way to pass that data in the request header instead ?

$.ajax({
         url: "http://localhost/PlatformPortal/Buyers/Account/SignIn",
         data: { signature: authHeader },
         type: "GET",
         success: function() { alert('Success!' + authHeader); }
      });

The following didn't work either

$.ajax({
         url: "http://localhost/PlatformPortal/Buyers/Account/SignIn",
         beforeSend: { signature: authHeader },
         async: false,                    
         type: "GET",
                    success: function() { alert('Success!' + authHeader); }
      });

Jquery Solutions


Solution 1 - Jquery

As of jQuery 1.5, there is a headers hash you can pass in as follows:

$.ajax({
    url: "/test",
    headers: {"X-Test-Header": "test-value"}
});

From http://api.jquery.com/jQuery.ajax:

> headers (added 1.5): A map of additional header key/value pairs to send along with the request. This setting is set before the beforeSend function is called; therefore, any values in the headers setting can be overwritten from within the beforeSend function.

Solution 2 - Jquery

Use beforeSend:

$.ajax({
         url: "http://localhost/PlatformPortal/Buyers/Account/SignIn",
         data: { signature: authHeader },
         type: "GET",
         beforeSend: function(xhr){xhr.setRequestHeader('X-Test-Header', 'test-value');},
         success: function() { alert('Success!' + authHeader); }
      });

http://api.jquery.com/jQuery.ajax/

http://www.w3.org/TR/XMLHttpRequest/#the-setrequestheader-method

Solution 3 - Jquery

$.ajax({
            url: URL,
            type: 'GET',
            dataType: 'json',
            headers: {
                'header1': 'value1',
                'header2': 'value2'
            },
            contentType: 'application/json; charset=utf-8',
            success: function (result) {
               // CallBack(result);
            },
            error: function (error) {
                
            }
        });

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionCranialsurgeView Question on Stackoverflow
Solution 1 - JqueryLukasView Answer on Stackoverflow
Solution 2 - JqueryAdamView Answer on Stackoverflow
Solution 3 - JqueryenthusiastView Answer on Stackoverflow