Angular 2 Token: odpowiedź dla preflight ma niepoprawny kod statusu HTTP 400

Question

Mam aplikację Angular2/TypeScript działającą w kodzie Visual Studio Code.

działającej API w VS 2015. Jest to projekt API: http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api

mogę użyć interfejsu API i tworzenia nowych użytkowników, ale gdy próbuję się zalogować (Użyj funkcji Token), a następnie pojawia się następujący błąd: XMLHttpRequest nie może załadować https://localhost:44305/Token. Odpowiedź dla Inspekcji wstępnej ma nieprawidłowy kod stanu HTTP 400

Nagłówek wygląda następująco:

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 

Moja kątowe obsługa wygląda tak:

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); 
} 

kiedy używam funtions AJAX, że w projekt API: http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api to działa dobrze? Co robię źle w żądaniu Angular POST?

Answer 1

Znalazłem rozwiązanie. Dzięki komentarzom na stronie API: http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api

Musiałem ustawić poprawny nagłówek dla application/x-www-form-urlencoded; charset = UTF-8 i serializować opublikowany obiekt. Nie mogę znaleźć metody Angular serializer, więc zrobiłem własną (kopię z innej witryny stackoverflow) w JavaScript.

Oto ostateczne wezwanie, gdy login użytkownika na API i poprosić o token, przy użyciu Angular2 & maszynopis:

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

Okazało się, że w kątowym 4 trzeba zrobić to w ten sposób.

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); 

    }