Базовая аутентификация с помощью JQuery/Ajax

Question

Я пытаюсь создать простую страницу аутентификации, где моя форма имеет три поля

1. имя пользователя
2. пароль
3. Тип гранта

На подаче формы I просто хочу отобразить возвращенный ответ с сервера на мой HTML в формате JSON. Для вызова AJAX в веб-службу также требуется Авторизация заголовок должен быть установлен. Но почему-то заголовки не устанавливаются. Я пытаюсь

beforeSend : function(xhr) 
    { 
     xhr.setRequestHeader('Authorization', "Basic ******"); 
     xhr.setRequestHeader("contentType", "application/json;charset=UTF-8"); 
    } 

Но когда я отладка коды в консоли, кажется точки останова никогда не выходит в эту функцию. Я новичок в Ajax и попробовал под кодом googling в Интернете. Я размещаю весь код ниже.

КОД:

$(document).ready(function() { 

    // process the form 
    $('form').submit(function(event) { 

     // get the form data 
     var formData = { 
      'username': $('#username').val(), 
      'password': $('#password').val(), 
      'grant_type': $('#grantType').val() 
     }; 

     // process the form 
     $.ajax({ 
      type  : 'POST', 
      url   : 'http://localhost:9090/oauth/token', 
      beforeSend: function (xhr) 
      { 
       xhr.setRequestHeader("Authorization", "Basic ******"); 
       xhr.setRequestHeader("contentType", "application/json;charset=UTF-8"); 
      }, 
      data  : formData, // our data object 
      dataType : 'json', // what type of data do we expect back from the server 
         encode   : true 
     }) 
      // using the done promise callback 
      .done(function(data) { 

       // log data to the console so we can see 
       console.log(data); 
       alert(data); 

       // here we will handle errors and validation messages 
      }) 

      .fail(function (jqXHR, textStatus){ 
       alert('Status : ' + textStatus + '' + JSON.stringify(jqXHR)); 
      }); 

     // stop the form from submitting the normal way and refreshing the page 
     event.preventDefault(); 
    }); 

}); 

Что это может вызвать не устанавливать заголовки в моем коде. Пожалуйста, исправьте меня.

В консоли (Google Chrome) на вкладке Сеть, можно увидеть ниже заголовков запроса

Accept:*/* 
Accept-Encoding:gzip, deflate, sdch 
Accept-Language:en-US,en;q=0.8 
Access-Control-Request-Headers:accept, authorization, content-type, contenttype 
Access-Control-Request-Method:POST 
Connection:keep-alive 
Host:192.168.1.128:9090 
Origin:null 
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36 

и ниже ошибки появляется в консоли.

И при вызове же API из Advanced Client Rest расширение для Google Chrome он показывает мне все заголовки

User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36 
Origin: chrome-extension://hgmloofddffdnphfgcellkdfbfbjeloo 
contentType: application/json;charset=UTF-8 
Authorization: Basic ********** 
Content-Type: application/x-www-form-urlencoded 
Accept: */* 
Accept-Encoding: gzip, deflate 
Accept-Language: en-US,en;q=0.8 

Я просто работает мой веб-страницы с помощью файла протокола.

Ex: file:///E:/Mahendra/Practice%20Example/Test/OauthTest.html

Я не уверен, если это вызывает проблемы.

Answer 1

Я обычно добавить заголовки, как это (код от «Запрос удаленной службы с помощью веб-прокси в Sharepoint», here):

$.ajax({ 
    url: "../_api/SP.WebProxy.invoke", 
    type: "POST", 
    data: JSON.stringify(
     { 
      "requestInfo": { 
       "__metadata": { "type": "SP.WebRequestInfo" }, 
       "Url": url, 
       "Method": "GET", 
       "Headers": { 
        "results": [{ 
         "__metadata": { "type": "SP.KeyValue" }, 
         "Key": "Accept", 
         "Value": "application/json;odata=verbose", 
         "ValueType": "Edm.String" 
        }] 
       } 
      } 
     }), 
    headers: { 
     "Accept": "application/json;odata=verbose", 
     "Content-Type": "application/json;odata=verbose", 
     "Authorization": "yourkeyvalueforauthorizationEXAMPLE", 
     "X-RequestDigest": $("#__REQUESTDIGEST").val() 
    }, 
    success: successHandler, 
    error: errorHandler 
}); 

Позвольте мне знать, как она идет