web-dev-qa-db-ja.com

Angular 2トークン：プリフライトの応答に無効なHTTPステータスコード400が含まれています

Visual Studio Codeを実行しているAngular2/TypeScriptアプリケーションがあります。

VS 2015で実行されているAPI。これはAPIプロジェクトです： http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api

APIを使用して新しいユーザーを作成できますが、ログインしようとすると（Token関数を使用）、次のエラーが表示されます：XMLHttpRequest cannot load 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

私のangularサービスは次のようになります：

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

AJAX機能をAPIプロジェクトで使用する場合： http://www.asp.net/web-api/overview/security/individual-accounts-in- web-api その後、正常に動作しますか?? Angular POST request？

apiangulartypescript
7
Benjamin

私は解決策を見つけました。 APIサイトのコメントに感謝： http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api

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

Angular2とTypeScriptを使用しているときに、ユーザーがAPIにログインしてトークンを要求するときの最後の呼び出しは次のとおりです。

 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("&");
}
10
Benjamin

私も先週と同じ問題に直面していて、グーグルとスタックオーバーフローで検索しましたが、すべての解決策は順調です。しかし、多くの読み取りと調査の結果、解決策の下にあることがわかりましたが、POSTメソッドでのみ問題が発生し、GETが正常に呼び出されました。

オプションを直接渡す代わりに、最初にJSON.stringify（options）のようなオプションオブジェクトを文字列化する必要があります

CreateUser(user:IUser): Observable<void> {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');
        headers.append('Accept', 'application/json');
        let options = new RequestOptions({ headers: headers });
        return this._http.post('http://localhost:22736/api/Employee/Create', **JSON.stringify(options)**)
            .map((res: Response) => {
                return res.json();
            })
            .catch(this.handleError);
    }

それは私にとってはうまくいきました、それが他の人にも役立つことを願っています。

1
Bhushan Laddha

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

  }
0
hmota

別のネイティブソリューションは HttpParams クラスを使用することであり、それは toString（） メソッドです。

 let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' });
    let options = { headers, observe: 'response' };

   const body = new HttpParams()
      .set('grant_type', 'password')
      .set('username', accountInfo.username)
      .set('password', accountInfo.password);

    return this._http.post('https://localhost:44305/Token',  body.toString(), options)

toString（）-キーと値のペア（=で区切られている）が＆sで区切られているエンコードされた文字列に本文をシリアル化します。

注意。また、ヘッダーを設定しなくても機能します

0
Yerkon