Угловой 2 Токен: ответ на предполетный период имеет неверный код состояния HTTP 400

Question

У меня есть приложение Angular2/TypeScript, работающее под кодом Visual Studio.

выполняющимся API в VS 2015. Это проект API: http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api

я могу использовать API и создавать новых пользователей, но когда я пытаюсь войти в систему (с помощью функции токена), то я получаю следующее ошибка: XMLHttpRequest не может загрузить https://localhost:44305/Token. Ответ на предполетной имеет недопустимый HTTP код состояния 400

Заголовок выглядит следующим образом:

Request URL:https://localhost:44305/Token 
Request Method:OPTIONS 
Status Code:400 
Remote Address:[::1]:44305 
Response Headers 
cache-control:no-cache 
content-length:34 
content-type:application/json;charset=UTF-8 
date:Wed, 10 Aug 2016 19:12:57 GMT 
expires:-1 
pragma:no-cache 
server:Microsoft-IIS/10.0 
status:400 
x-powered-by:ASP.NET 
x-sourcefiles:=?UTF-8?B?QzpcQ2hlY2tvdXRcQVBJXzJ2czJcQVBJXEFQSVxUb2tlbg==?= 
Request Headers 
:authority:localhost:44305 
:method:OPTIONS 
:path:/Token 
:scheme:https 
accept:*/* 
accept-encoding:gzip, deflate, sdch, br 
accept-language:en-US,en;q=0.8,da;q=0.6,nb;q=0.4 
access-control-request-headers:authorization 
access-control-request-method:POST 
cache-control:no-cache 
origin:http://evil.com/ 
pragma:no-cache 
referer:http://localhost:3000/signin 
user-agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 

Моя угловая служба выглядит следующим образом:

loginAccount(account: Account): Observable<string> {   
    var obj = { Email: account.Email, Password: account.Password, grant_type: 'password' }; 
     let headers = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({method: RequestMethod.Post, headers: headers }); 

     let body = JSON.stringify(obj); 
     console.log('loginAccount with:' + body); 

     return this._http.post('https://localhost:44305/Token', body, options) 
          .map(this.extractData) 
          .catch(this.handleError); 
} 

Когда я использую Funtions AJAX, что в API-проект: http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api, тогда он отлично работает ?? Что я делаю неправильно в запросе Angular POST?

Answer 1

Я нашел решение. Благодаря комментариям на сайте API: http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api

Мне нужно было установить правильный заголовок для application/x-www-form-urlencoded; charset = UTF-8 и сериализуйте объект, который я разместил. Я не могу найти метод Углового сериализатора, поэтому я сделал свой собственный (копирование с другого сайта stackoverflow) в JavaScript.

Вот окончательный вызов, когда пользователь Войти на API и запросить маркер, при использовании Angular2 & Машинопись:

loginAccount(account: Account): Observable<string> {   
    var obj = { UserName: account.Email, Password: account.Password, grant_type: 'password' }; 

     let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }); 
     let options = new RequestOptions({method: RequestMethod.Post, headers: headers }); 

     let body = this.serializeObj(obj); 

     return this._http.post('https://localhost:44305/Token', body, options) 
          .map(this.extractData) 
          .catch(this.handleError); 
} 

private serializeObj(obj) { 
    var result = []; 
    for (var property in obj) 
     result.push(encodeURIComponent(property) + "=" + encodeURIComponent(obj[property])); 

    return result.join("&"); 
} 

Answer 2

я обнаружил, что в угловом 4 вы должны сделать это так.

public addQuestion(data: any): Observable<Response> { 

    let headersObj = new Headers(); 
    headersObj.set('Content-Type', 'application/x-www-form-urlencoded'); 

    let requestArg: RequestOptionsArgs = { headers: headersObj, method: "POST" }; 

    var params = new URLSearchParams(); 
    for(let key of Object.keys(data)){ 
     params.set(key,data[key]); 
    }; 

    return this.http.post(BaseApi.endpoint + 'Question', params.toString(), requestArg) 
    .map((res: Response) => res.json().data); 

    }