jQuery AJAX Custom Header

Question

I'm trying to perform a request to the iContact API which required me to use a custom header for authentiation (http://developer.icontact.com/documentation/authenticate-requests). This is my code:

$.ajax({
        type: "GET", 
        url: "https://app.icontact.com/icp/a/",
        contentType: "application/json",
        beforeSend: function(jqXHR, settings){
                jqXHR.setRequestHeader("Accept", "application/json");
                jqXHR.setRequestHeader("Api-Version", iContact_API_version);
                jqXHR.setRequestHeader("Api-AppId", iContact_appID);
                jqXHR.setRequestHeader("Api-Username", iContact_username);
                jqXHR.setRequestHeader("API-Password", iContact_appPassword);}
});

For some reason the request doesn't go through. However, when I perform the same request manually (using Chrome REST console) it works just fine. If I take out the custom headers (API-*), the request goes through but of course the authentication fails and I get back a regular HTML page.

I switched over to Firefox and checked Request/Response Headers:

Request:

Host    app.icontact.com
User-Agent  Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12
Accept  text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language en-us,en;q=0.5
Accept-Encoding gzip,deflate
Accept-Charset  ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive  115
Connection  keep-alive
Origin  http://184.72.61.244
Access-Control-Request-Me...    GET
Access-Control-Request-He...    api-appid,api-password,api-username,api-version

Response:

HTTP/1.1 302 Found
Date: Tue, 14 Jun 2011 23:43:56 GMT
Server: Apache/2.2.9 (Debian)
Set-Cookie: intellicontact_phpsess=1c7ca333017b47f46edd893dae584781; path=/; domain=.icontact.com; secure; HttpOnly
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
Location: https://app.icontact.com/icp/login/sentry.php?relurl=https%3A%2F%2Fapp.icontact.com%2Ficp%2Fa%2F&sess=
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 20
Connection: close
Content-Type: text/html; charset=utf-8

Any ideas what's going wrong here?

Thanks!

Answer 1

The beforeSend hook is only available for $.ajaxSetup() so if you want to add it only to the $.ajax() you simply can go with the headers property.

---

If you want to add a custom header (or set of headers) to an individual request then just add the headers property:

// Request with custom header
$.ajax({
    url: 'foo/bar',
    headers: { 'x-my-custom-header': 'some value' }
});

If you want to add a default header (or set of headers) to every request then use $.ajaxSetup():

$.ajaxSetup({
    headers: { 'x-my-custom-header': 'some value' }
});

// Sends your custom header
$.ajax({ url: 'foo/bar' });

// Overwrites the default header with a new header
$.ajax({ url: 'foo/bar', headers: { 'x-some-other-header': 'some value' } });

If you want to add a header (or set of headers) to every request then use the beforeSend hook with $.ajaxSetup():

$.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader('x-my-custom-header', 'some value');
    }
});

// Sends your custom header
$.ajax({ url: 'foo/bar' });

// Sends both custom headers
$.ajax({ url: 'foo/bar', headers: { 'x-some-other-header': 'some value' } });

Edit (more info): One thing to be aware of is that with ajaxSetup you can only define one set of default headers and you can only define one beforeSend. If you call ajaxSetup multiple times, only the last set of headers will be sent and only the last before-send callback will execute.

Source: https://stackoverflow.com/a/14655768/1581725