angular 2 http withCredentials

时间:2016-07-27 14:02:40

标签: angular angular2-services angular2-http

我正在尝试使用withCredentials将cookie发送到我的服务但无法找到如何实现它。 文档说“如果服务器需要用户凭据,我们将在请求标头中启用它们”没有示例。 我尝试了几种不同的方法,但它仍然不会发送我的cookie。 到目前为止,这是我的代码。

private systemConnect(token) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('X-CSRF-Token', token.token);
    let options = new RequestOptions({ headers: headers });
    this.http.post(this.connectUrl, { withCredentials: true }, options).map(res => res.json())
    .subscribe(uid => {
        console.log(uid);
    });
}

3 个答案:

答案 0 :(得分:49)

尝试像这样更改您的代码

let options = new RequestOptions({ headers: headers, withCredentials: true });

this.http.post(this.connectUrl, <stringified_data> , options)...

如您所见,第二个参数应该是要发送的数据(使用JSON.stringify或仅'')以及三分之一参数中的所有选项。

答案 1 :(得分:10)

从Angular 4.3开始,HttpClient and Interceptors were introduced.

一个简单的例子如下所示:

@Injectable()
export class WithCredentialsInterceptor implements HttpInterceptor {

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        request = request.clone({
            withCredentials: true
        });

        return next.handle(request);
    }
}

constructor(
      private http: HttpClient) {

this.http.get<WeatherForecast[]>('api/SampleData/WeatherForecasts')
    .subscribe(result => {
        this.forecasts = result;
    },
    error => {
        console.error(error);
    });

答案 2 :(得分:3)

创建一个Interceptor是一个好主意,可以将内容注入整个应用程序的标头中。另一方面,如果您正在寻找需要在每个请求级别上完成的快速解决方案,请尝试将withCredentials设置为true,如下所示

const requestOptions = {
 headers: new HttpHeaders({
  'Authorization': "my-request-token"
 }),
 withCredentials: true
};