asp.net web api 2 и jquery post

Question

Я изучаю asp.net web mvc 5/asp.net web api 2. Теперь я создал проект web api 2 по умолчанию (с шаблоном бутстрапа). Я также включил Cors через эти шаги: http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api#enable-cors

Когда я запускаю проект и пытаюсь вызвать api через Fiddler Web Debugger, все работает отлично. Это сырье запрос я послал:

POST HTTP: /// mywebapi/Токен HTTP/1.1 Content-Type: применение/х-WWW-форм-UrlEncode User-Agent: Скрипач Ведущий: Контент- Длина: 71

grant_type = пароль & userName=me@mymail.com & Password = mypwd01

Но теперь я пытаюсь вызвать API-интерфейс с помощью AJAX вызова JQuery, и теперь я застрял. Это то, что я до сих пор:

function sendRequest() { 
      //var method = $('#method').val(); 
      var email = 'me@mymail.com'; 
      var pwd = 'mypwd01!'; 

      $.ajax({ 
       //crossDomain: true, 
       type: 'post', 
       url: serviceUrl, 
       dataType: 'jsonp', 
       contentType: 'application/x-www-form-urlencoded; charset=UTF-8', 
       data: 'grant_type=password&userName='+ email + '&Password=' + pwd, 
       xhrFields: { withCredentials: true } 
      }).done(function (data) { 
       $('#value1').text(data); 
      }).error(function (jqXHR, textStatus, errorThrown) { 
       $('#value1').text(jqXHR.responseText || textStatus); 
      }); 
     } 

Теперь, когда я запускаю мою страницу, я получаю сообщение об ошибке 400, Bad запрос (на моей локальной машине). Когда я запускаю ту же страницу на сервере, я получаю ответ 200. Я не могу понять, что я делаю неправильно.

Answer 1

Ok, я сумел создать соединение. У меня есть некоторые сомнения в том, что это правильный путь, поэтому любые советы приветствуются. Моя конечная цель - создать телефонное/ионное приложение, которое может выполнять авторизованные звонки на сервер. На данный момент, это то, что я сделал:

На сервере, к тому же позволяет CORS (см мой первоначальный вопрос выше) Я также добавил следующие строки в WebConfig:

<system.webServer> 
    <httpProtocol> 
     <customHeaders> 
      <add name="Access-Control-Allow-Origin" value="*" /> 
     </customHeaders> 
    </httpProtocol> 
</system.webServer> 

Я использовал * из-за мобильных телефонов необходимо совершать звонки на сервер (телефонная/ионная).

Теперь я изменил код клиента, как это:

$.ajax({ 
    //crossDomain: true, 
    type: "POST", 
    url: serviceUrl, 
    //processData: false, 
    dataType: 'json', 
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8', 
    data: 'grant_type=password&userName=' + email + '&Password='+ pwd, 
}).done(function (data) { 
    $('#value1').text(JSON.stringify(data)); 
}).error(function (jqXHR, textStatus, errorThrown) { 
    $('#value1').text(jqXHR.responseText || textStatus); 
}); 

Answer 2

Использование ниже

function sendRequest() { 
     //var method = $('#method').val(); 
     var email = 'me@mymail.com'; 
     var pwd = 'mypwd01!'; 

     $.ajax({ 
      //crossDomain: true, 
      type: 'POST', 
      url: serviceUrl, 
      dataType: 'jsonp', 
      contentType: 'application/x-www-form-urlencoded; charset=UTF-8', 
      data: Json.stringify({ 'grant_type':'password','userName':email, 'Password': pwd }), 
      xhrFields: { withCredentials: true } 
     }).done(function (data) { 
      $('#value1').text(data); 
     }).error(function (jqXHR, textStatus, errorThrown) { 
      $('#value1').text(jqXHR.responseText || textStatus); 
     }); 
    }