title: How to do AJAX POST cross-domain with custom headers
body: <p>I have been looking around all over and I cannot find a definitive answer to this.</p>
  
  <p>I need to be able to perform an AJAX POST and send up custom headers. I have full control of both the client side script and the server side service, so if I have to make any tweaks to either side to make this work, I am able to make those changes.</p>
  
  <p>I am currently using jQuery, however if jQuery is unable to do this and I need to use another library that is not a problem at all either. Ideally I would prefer to stick to a single library (jQuery) but am more than happy to use a second if it solves my problem.</p>
  
  <p>Currently my code looks like this:</p>
  
  <pre><code>$.ajax({
      type: 'POST',
      url: 'http://localhost:65079/TestHandler',
      crossDomain: true,
      data: myVariableOfData,
      dataType: 'json',
      beforeSend: function(xhr) {
          xhr.setRequestHeader('MessageId', 'abc123');
      },
      success: function(responseData, textStatus, messageId) {
          console.log("success");
      },
      error: function(responseData, textStatus, errorThrown) {
          console.log(textStatus);
          console.log(responseData);
          console.log(errorThrown);
      }
  });
  </code></pre>
  
  <p>and unfortunately jQuery does not even attempt to send the request to the server, however as soon as I remove the headers, it sends the request. I really need these headers though, so any help would be highly appreciated.</p>
  
  <p>Please ask me any questions that may help resolve this issue and I will respond as fast and as I best as I can.</p>