Angular 2 http withCredentials

Question

我正在尝试使用 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);
    });
}

Answer 1

尝试像这样更改你的代码

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

和

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

如您所见，第二个参数应该是要发送的数据（使用

JSON.stringify

或仅使用

''

）以及第三个参数中的所有选项。

Answer 2

从 Angular 4.3 开始，引入了 HttpClient 和拦截器。

下面显示了一个简单的示例：

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

请记住为您的应用程序模块提供拦截器，如文章所述：

为了激活我们应用程序的拦截器，我们需要将其提供给文件 app.module.ts 中的主应用程序模块 AppModule：

您的

@NgModule

需要将其包含在其提供程序中：

  ...
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: WithCredentialsInterceptor,
    multi: true
  }],
  ...

Answer 3

创建一个

Interceptor

是一个好主意，可以将内容注入到应用程序的标头中。另一方面，如果您正在寻找需要在每个请求级别完成的快速解决方案，请尝试将

withCredentials

设置为

true

，如下所示

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

Answer 4

这是使用拦截器的 Angular 17 的解决方案：

credential.interceptor.ts

import { HttpInterceptorFn } from '@angular/common/http';

export const credentialsInterceptor: HttpInterceptorFn = (request, next) => {
  const modifiedRequest = request.clone({
    withCredentials: true
  });
  return next(modifiedRequest);
};

app.config.ts

import { ApplicationConfig } from '@angular/core';

import { provideHttpClient,
         withFetch,
         withInterceptors } from '@angular/common/http';

import { credentialsInterceptor } from './credentials.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideHttpClient(withFetch(), withInterceptors([credentialsInterceptor])),
  ]
};