角2トークン：プリフライトの応答に無効なHTTPステータスコードがあります。

Question

私はVisual Studio Codeを実行しているAngular2/TypeScriptアプリケーションを持っています。

これは、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

は、ヘッダーは次のようになりました。私はその中にAJAXのfuntionsを使用する場合

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

：

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 

私の角度のサービスは、このようになります。 APIプロジェクト：http://www.asp.net/web-api/overview/security/individual-accounts-in-web-apiそれはうまくいく？ Angular POSTリクエストで何が間違っていますか？

Answer 1

解決策が見つかりました。 APIサイトのコメントのおかげで、application/x-www-form-urlencodedの正しいヘッダーを設定する必要がありました。 charset = UTF-8と投稿したオブジェクトをシリアル化します。私はAngularシリアライザメソッドを見つけることができないので、JavaScriptで別の（stackoverflowサイトからコピーして）自分で作成しました。

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にあなたはこのようにそれをしなければならないことがわかった。ここで

はAngular2 &活字体を使用した場合、最後の呼び出しは、APIのときに、ユーザーのログインで、トークンを要求します。

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

    }