web-dev-qa-db-ja.com

リクエストヘッダーAngular2にCookieを設定

私はangular2が初めてです。私のサーバー（スプリング）は、応答ヘッダーにset-cookie値を使用して認証に応答します。

次のAPI呼び出しのリクエストヘッダーにそのCookieを設定する方法は？

よく検索しましたが、適切な解決策が見つかりません。

angulartypescriptangular-http
10
Sibiraj

Cookieは、ドメインに保存した後に行うすべての呼び出しに自動的に添付されます。あなたは何か他の間違ったことをしている。認証データをREST呼び出しにアタッチするための自動メカニズムを作成する場合は、カスタムHttpInterceptorを作成するこのチュートリアルを参照してください。

https://medium.com/aviabird/http-interceptor-angular2-way-e57dc2842462

4
Mario Petrovic

http.get()またはhttp.post() メソッドの一部として、 RequestOptionsArgs を指定できます。

HeadersのRequestOptionsArgsを使用して、必要な認証ヘッダーを指定します。

大まかな例として、以下を参照してください。

class PeopleComponent {
  constructor(http: Http) {  
    let customHeaders: Headers = new Headers();
    customHeaders.append('myHeaderName', 'myHeaderValue');
    
    http.get('http://my.web/service', { headers: customHeaders })       
      .map(res => res.json())
      .subscribe(people => this.people = people);
  }
}
9
aaron-bond

CORSシナリオの場合、RequestOptionsでtrueに設定されたwithCredentialsプロパティを追加する必要があります。以下は、HTTPヘルパーにどのように実装したかのスニペットです。

get(resource: string) {
  return this.http.get(`/api/${resource}`, this.getRequestOptions())
    .map(result => result.json())
    .catch(e => e.status === 401 ? Observable.throw('Unauthorized') : e.json());
}

post(resource: string, body: any) {
  return this.http.post(`/api/${resource}`, body, this.getRequestOptions())
    .map(result => result.json())
    .catch(e => e.status === 401 ? Observable.throw('Unauthorized') : e.json());
}

private getRequestOptions() {
  const headers = new Headers({
    'Content-Type': 'application/json',
  });

  return new RequestOptions({headers: headers, withCredentials: true});
}
1
jberndsen