title: Cannot send authorization header with ajax
body: <p>Below is my function for sending a request:</p>
  
  <pre><code>function invokeService() {
          $(document).ready(function() {
                  var user = "User1";
                  var pass = "Pwd1";
  
  
          var hash_str=make_base_auth(user, pass);
  
          // the post to your webservice or page
          $.ajax({
              method: "GET",
              xhrFields: {
                  withCredentials: true
              },
              beforeSend: function (xhr) {
                          xhr.setRequestHeader('Authorization', hash_str);
                  },
              headers: {
                  'Authorization': 'Basic ' + hash_str
              },
              url: "http://Servername/ProjName/TestService.svc/GetDetails/" + $('#itemid').val(),
              contentType: "application/json; charset=utf-8",
              dataType: "jsonp"
  
  
  
          }); 
      });
  }
  </code></pre>
  
  <p>I have tried different ways, by passing user name and password directly via something like that:</p>
  
  <pre><code>$.ajax({
      method: "GET",
      username: user,
      password: pass,
      ...
  });
  </code></pre>
  
  <p>and by setting authorization header, but every tie I check it in Fiddler, in <code>Auth</code> section of the request it states "No authorization headerr is present". It just does not send it. Can anyone help me fix my authorization header?</p>
  
  <p>Below is what shows up in Fiddler in a request header:</p>
  
  <pre><code>GET /projName/TestService.svc/GetDetails/ABC123?callback=jsonpxxxxxxxxxxxxx HTTP/1.1
  
  
  Client
  Accept: application/javascript, */*;q=0.8
  Accept-Encoding: gzip, deflate
  Accept-Language: en-US
  User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
  
  Transport
  Connection: Keep-Alive
  Host: ServerName
  </code></pre>