title: How to add header to request in Jquery Ajax?
body: <p>I'm trying to add header to request in Ajax with JQuery.</p>
  
  <p>Below is the code :-</p>
  
  <pre>$.ajax({
      type: "POST",
      contentType: "application/json",
      url: "http://localhost:8080/core-service/services/v1.0/patients/registerPatients",
      data: JSON.stringify(patientDTO),
      //crossDomain : true,
      dataType: 'json',
      headers: {"X-AUTH-TOKEN" : tokken},
      success: function(patientDTO) {
          console.log("SUCCESS: ", patientDTO);
          /* location.href = "fieldagentHRA.html";*/
          if (typeof(Storage) !== "undefined") {
              localStorage.setItem("patUrn", patientDTO.data);
              location.href="fieldagentHRA.html";
          }
      },
      error: function(e) {
      console.log("ERROR: ", e);
      display(e);
      },
      done: function(e) {
      enableRegisterButton(true);
      }
  });</pre>
  
  <p>I inspected this with chrome and found that header's body is not being added.<a href="https://i.stack.imgur.com/T1EkG.png" rel="noreferrer"><img src="https://i.stack.imgur.com/T1EkG.png" alt="Without Header Body"></a></p>
  
  <p>Then I used <a href="https://chrome.google.com/webstore/detail/requestly/mdnleldcmiljblolnjhpnblkcekpdkpa" rel="noreferrer">Requestly</a> (<strong>Requestly is chrome+firefox plugin with which we can manually add a header to the request</strong>).</p>
  
  <p>After manually adding header :-</p>
  
  <p><a href="https://chrome.google.com/webstore/detail/requestly/mdnleldcmiljblolnjhpnblkcekpdkpa" rel="noreferrer"><img src="https://i.stack.imgur.com/Ly3o8.png" alt="After Manually Adding the header"></a></p>
  
  <p>In both the pics request header x-auth-token is present in "ACCESS-CONTROL-REQUEST-HEADERS" but "X-AUTH-TOKEN" header along with header value is present in second pic which is not there in the first pic.</p>
  
  <p>So my question is how to add request headers in Ajax with JQuery ?</p>