when i send ajax based call to api without header then it's  working fine but i add some custom header like Authorization then it's does not add the header and i  am getting error...

any one is there who's help.... 

1. $("#Loginform").submit(function () {
2.             var token = localStorage.getItem("AccessToken");
3.             var username = $("#username").val();
4.             var password = $("#password").val();
5.             $.ajax({
6.                 url: $(this).attr('action'),
7.                 data: {
8.                     UserName: username,
9.                     Password: password
10.                 },
11.                 method: 'POST',
12.                 contentType: "application/x-www-form-urlencoded; charset=urf-8",
13.                 dataType: 'json',
14.                 beforeSend: function (xhr) {
15.                     alert(token);
16.                     xhr.setRequestHeader('Authorization', "Bearer" + " " + token);
17.                 }
18.             }).done(function (data) {
19.                 if (data.status == 'success')
20.                 {
21.                     window.location.href = "/Home/Index";
22.                 }
23.                 if (data.status = "error")
24.                 {
25.                     alert("ErRoR");
26.                 }
27.             }).error(function (jqXHR, status, errorThrown) {
28.                 alert(status+"ok");
29.             });
30.             });