jQuery AJAX Custom Header

I'm trying to perform a request to the iContact API which required me to use a custom header for authentiation (htt开发者_JAVA百科p://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!

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

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);
                    }


                }); 

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;
        });
  }