web-dev-qa-db-ja.com

Angular 5、httpclientはポストの設定Cookieを無視します

私はAngular 5でHttpClientを処理しています。問題はログインプロセス中にサーバーによって送信されたcookieです。Angularはそれを無視しているようです「withCredentials」を使用したリクエストでは設定されていません。

私のpackage.json

.... "@ angular/cli"： "1.6.3"、 "@ angular/compiler-cli"： "^ 5.0.0"、 "@ angular/language-service"： "^ 5.0.0"、。 ...

私のコード

makeLogin (us:string, password:string): Observable<any> {
    let body : any = new HttpParams()
      .set('username', us)
      .set('password', password);
    return this.http.post(this.urlLogin,
      body.toString(),

      {
        headers: new HttpHeaders()
          .set('Content-Type', 'application/x-www-form-urlencoded')
      }
    );
  }

サーバーはこれらのヘッダーとともにhttp 200を返します

Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://localhost:4200
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Content-Length:17
Date:Tue, 23 Jan 2018 21:05:46 GMT
Expires:0
Pragma:no-cache
Set-Cookie:JSESSIONID=BF9392ED5DE99710B44845201DD26B3F;path=/;HttpOnly
Vary:Origin
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block

その後、例えば次のリクエスト

getEventt (): Observable<any> {
    return this.http.get('http://localhost:8080/list',{ withCredentials: true });
  }

chromeまたはFirefoxの開発ツールを使用すると、送信されたCookieを確認できませんが、ブラウザまたは郵便配達員を使用している場合、すべてが正常に機能し、Cookieが送信されたことが確認できます。

私が何か間違っているのか、おそらくhttpClientを悪い方法で使用しているのかわかりません。

問題がなければ、サーバーはTomcat 8にデプロイされ、Angularアプリはnodejsで実行されています（npm start））

angularauthenticationangular5setcookie
8
UserMan

いよいよ上手くいきました!!

解決策はポストリクエストでした、

多分私は間違っているかもしれませんが、RequestOptionsクラスはAngular 5.0.0で廃止されたようです。そのため、数回の試行が適切な構成に到達した後、ここに修正されたメソッドがあります

/** POST: add a new hero to the server */
makeLogin (us:string, password:string): Observable<any> {
    let enco : any = new HttpHeaders()
        .set('Content-Type', 'application/x-www-form-urlencoded');

    let body : any = new HttpParams()
    .set('username', us)
    .set('password', password);
    return this.http.post(this.urlServicioLogin,
     body.toString(),
     {
       headers: enco,withCredentials:true
     }
   );
}

これで、withCredentialsがtrueになっているため、ブラウザでcookieが設定されているのを確認でき、その後、後続のリクエストで送信します。

注：アプリがcookieを使用して認証が行われるRESTサービスを使用する必要がある場合、バックエンドとのすべての対話でwithCredentialsフラグをtrueに設定する必要があります。

10
UserMan