web-dev-qa-db-ja.com

Angular 2-応答からクッキーを取得する

私は助けが必要です、私は応答からクッキーを取得しようとしています、そして私は方法を見つけることができません、私はTSCとng2でかなり新しいです。

これはng2 http投稿です

_return this._http
    .post('http://demo...', body, { headers: headers })
    .subscribe(
        (response: Response) => {
            this.storeToken(response);
        }, (err) => {
            console.log('Error: ' + err);
        }
    );
_

これはサーバーの応答です。

_HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With
Set-Cookie: JSESSIONID=A099CC4CA7A25DFBD12701630A7DC24C; Path=/pbcp/; HttpOnly
Content-Type: application/json;charset=UTF-8
Transfer-Encoding: chunked
Date: Fri, 17 Feb 2017 04:08:15 GMT

32
{"status":"OK","message":"User is Authenticated."}
0
_

ヘッダー配列に表示されないため、混乱しています...

console.log(response)の結果

Response from Chrome console

console.log(response.headers)の結果

Headers array from Chrome console

...、しかし、私はクッキーセクションでそれを見ることができます。

Cookies section in Chrome

ありがとう！

angulartypescriptcookies
13
Sebastian Ferrari

まあ、いくつかの研究の後、私は私の側から2つの問題を発見しました。

最初に、Cookieは正常に設定されましたが、間違った場所で探していました。この間、私はlocalhost:3000ドメインの下でそれを探していましたが、Cookieはhttp://demo...ドメインの下に正しく保存されていました。これが適切な動作です。 chrome://settings/ ==>詳細設定を表示==>すべてのCookieとサイトデータ... ==>および次のようなリモートホストによるフィルタリングで確認できます。

enter image description here

Second、Cookieを自動的に含めて受け入れるために、残りの要求ヘッダーでもwithCredentials: trueを使用するのを忘れていました。

authenticate(username: string, password: string) {
    var body = `{"username":"${username}","password":"${password}"}`;
    var headers = new Headers();
    headers.append('Content-Type', 'application/json');
    let options = new RequestOptions({ headers: headers, withCredentials: true });

    return this._http
               .post('http://demo...', body, options)
               .subscribe(
                   (response: Response) => {
                   this.doSomething(response);
               }, (err) => {
                   console.log('Error: ' + err);
               });
}

回答と時間をありがとう@All！

19
Sebastian Ferrari

私はあなたがangular2 httpモジュールを使用してサーバーに接続し、サーバー応答でobservableを返すと仮定しています。

サブスクライブする場合、応答を使用できます。

//...
http.post(...your content...)
 .take(1) // optional: depending on your needs you could .take(x) this to just take a certain number of responses and then terminate the subscription in order to not have a "hot Observable" lying around
 .subscribe(response =>{
      .console.log(response);
    // if I am not mistaken "response.headers" should contain the "Set-Cookie" you are looking for 
 });

オブザーバブルをPromiseに変換することもできます。

http.post(...your content...)
  .toPromise()
  .then(response=>{
     console.log(response);
     let headers = response.headers;
     console.log(headers);
  })
  .catch(err=>console.log(err));

特定の応答の場合、response.json（）を使用して変換し、オブジェクトを取得する必要がある場合があります。

お役に立てれば。探しているものでない場合は、詳細を教えてください。

1
jparg