时间戳

首页 > 解决方案 > 防止 HttpClient 在 PUT、POST 和 PATCH 上读取 cookie

angular - 防止 HttpClient 在 PUT、POST 和 PATCH 上读取 cookie

问题描述

如何防止我的 Angular 应用程序尝试读取来自 HttpClient 的 PUT / POST 和 PATCH 请求上的document.cookie ？

错误

put, post&patch请求HttpClient产生以下错误。

backend.service.ts:127 DOMException：无法从“文档”读取“cookie”属性：文档已被沙盒化，并且缺少“允许同源”标志。在 HttpXsrfCookieExtractor.push../node_modules/@angular/common/fesm5/http.js.HttpXsrfCookieExtractor.getToken ( http://localhost:8080/44812272_a91e_4126_ad7b_6a54454 ..._sc-lightcontrol.jar/vendor.js:27596:37) 在 HttpXsrfInterceptor .push../node_modules/@angular/common/fesm5/http.js.HttpXsrfInterceptor.intercept ( http://localhost:8080/44812272_a91e_4126_ad7b_6a54454 ..._sc-lightcontrol.jar/vendor.js:27633:39) 在 HttpInterceptorHandler.push ../node_modules/@angular/common/fesm5 /http.js.HttpInterceptorHandler.handle ( http://localhost:8080/44812272_a91e_4126_ad7b_6a54454…_sc-lightcontrol.jar/vendor.js:27004:33) 在 HttpInterceptingHandler.push../node_modules/@angular/common/fesm5/http.js.HttpInterceptingHandler.handle ( http://localhost:8080/44812272_a91e_4126_ad7b_6a54454 …_sc -lightcontrol.jar/vendor.js:27677:27) 在 MergeMapSubscriber.project ( http://localhost:8080/44812272_a91e_4126_ad7b_6a54454 ..._sc-lightcontrol.jar/vendor.js:26755:184) 在 MergeMapSubscriber.push../node_modules /rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext ( http://localhost:8080/44812272_a91e_4126_ad7b_6a54454 ..._sc-lightcontrol.jar/vendor.js:110070:27) 在 MergeMapSubscriber.push../node_modules/ rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (http://localhost:8080/44812272_a91e_4126_ad7b_6a54454 …_sc-lightcontrol.jar/vendor.js:110060:18) 在 MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next ( http:// /localhost:8080/44812272_a91e_4126_ad7b_6a54454 …_sc-lightcontrol.jar/vendor.js:101403:18) 在 Observable._subscribe ( http://localhost:8080/44812272_a91e_4126_ad7b_6a54454 …_sc-lightcontrol.jar/vendor.js:102)在 Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe ( http://localhost:8080/44812272_a91e_4126_ad7b_6a54454 ..._sc-lightcontrol.jar/vendor.js:100628:25)

代码

putTest()，postTest()并patchTest()因上述异常而失败。
getTest()作品。

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
  withCredentials: false
};

@Injectable({ providedIn: 'root' })
export class BackendService {

  constructor(
    private http: HttpClient,
    private messageService: MessageService
  ) { }

  putTest(): Observable<any> {
    console.log('PUT test');
    return this.http.put(BackendUrl.updateDeviceToControl, mockDevicePropertyData, httpOptions)
      .pipe(
        tap(_ => console.log('Success')),
        catchError(this.handleError<any>('PUT test'))
      );
  }

  patchTest(): Observable<any> {
    console.log('PATCH test');
    return this.http.patch(BackendUrl.updateDeviceToControl, mockDevicePropertyData, httpOptions)
      .pipe(
        tap(_ => console.log('Success')),
        catchError(this.handleError<any>('PATCH test'))
      );
  }

  postTest(): Observable<any> {
    console.log('POST test');
    return this.http.post(BackendUrl.updateDeviceToControl, mockDevicePropertyData, httpOptions)
      .pipe(
        tap(_ => console.log('Success')),
        catchError(this.handleError<any>('POST test'))
      );
  }

  getTest(): Observable<any> {
    console.log('GET test');
    return this.http.get(BackendUrl.updateDeviceToControl)
      .pipe(
        tap(_ => console.log('Success')),
        catchError(this.handleError<any>('GET test'))
      );
  }
}

标签： angulartypescriptcookiesangular-httpclient

解决方案

如果我禁用对传出请求的XSRF 保护支持， Put / Post & Patch 请求将起作用，默认情况下启用并尝试读取 cookie XSRF-TOKEN。 

@NgModule({
  imports: [
    HttpClientModule,
    HttpClientXsrfModule.disable(),
  ]
})

HttpClientXsrfModule.disable()

推荐阅读