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!

You're probably looking at an OPTIONS request, which is looking whether the destination host allows cross-domain requests, [more info](http://stackoverflow.com/questions/1256593/jquery-why-am-i-getting-an-options-request-insted-of-a-get-request). A workaround is using JSONP, but this doesn't support custom headers, [here's why](http://stackoverflow.com/questions/3350778/modify-http-headers-for-a-jsonp-request). You might end up using [cURL](http://en.wikipedia.org/wiki/CURL) or the likes if iContact doesn't support cross-domain ajax-requests or JSONP. — Joram van den Boezem, Aug 28 '12 at 14:12
possible duplicate of [JSON Post with Customized HTTPHeader Field](http://stackoverflow.com/questions/7100294/json-post-with-customized-httpheader-field) — JAAulde, Feb 20 '14 at 01:12

score 1 · Answer 1 · edited May 23 '17 at 12:06

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

The official documentation for jQuery.ajaxSetup() states that it is not recommended for use: "Set default values for future Ajax requests. _ Its use is not recommended _." https://api.jquery.com/jquery.ajaxsetup/ — Craig Jacobs, Sep 03 '18 at 15:34

score 0 · Answer 2 · answered Sep 30 '12 at 01:05

It's strange that you are getting a 302 (Redirectional) in the response. Have you tried logging error with the Ajax function, to troubleshoot the problem? Here is an example of something I used.

console.log(" call back url :"+ callBackURL);
               $.ajax({
                    url: callBackURL,
                    type: 'post', //'GET' in your case    
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json' , // explicitly mentioning datatype
                    success: function(json) {
                        console.log(" reponse :"+ json);

                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                            console.log("error :"+XMLHttpRequest.responseText);
                    }


                });

score -1 · Answer 3 · answered Feb 16 '15 at 05:34

please try this surely you can get the problem solve.

  function FormSubmit()
  { 
  $.ajax({     
  type: "POST",
  url: 'index.php',
  data: $("#form_main").serialize(),
  async: false }).done(function( data ) {
  $("#Response").hide(); 
  if (isNaN(data)) {

  dispmsg = "<div class='alert alert-danger' role='alert'>Oops..Something had gone wrong! Please try again!</div>"; 
  $("#assess_me_response").html(dispmsg); setTimeout('ResetForm();',3000);
    } 
    else  { 

  dispmsg = "<div class='alert alert-success' role='alert'>Thank you for sharing the details. Our Consultant will contact you shortly!</div>"; $("#assess_me_response").html(dispmsg); setTimeout('Redirect();',3000); 

     }
       return true;
        });
  }

Generally, answers are much more helpful if they include an explanation of what the code is intended to do, and why that solves the problem without introducing others. Adding "try this" doesn't count. — Nathan Tuggy, Feb 16 '15 at 05:57

jQuery AJAX Custom Header

3 Answers3