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

如何防止Angular应用程序在HttpClient的PUT/POST和补丁请求中尝试读取document.cookie

我的应用在另一个web应用的iframe中运行，不允许访问Cookie！ 我无法控制此环境/应用程序。 让请求顺利工作。 我用的是Angular 6.0.2 错误 来自HttpClient的put、post和修补程序请求产生以下错误

backend.service.ts:127 DomeException:无法读取“cookie” “文档”中的属性：文档是沙盒，缺少 “允许相同来源”标志。 在HttpXsrfCookieExtractor.push../node_modules/@angular/common/fesm5/http.js.HttpXsrfCookieExtractor.getToken …_sc-lightcontrol.jar/vendor.js:27596:37 在HttpXsrfInterceptor.push../node_modules/@angular/common/fesm5/http.js.HttpXsrfInterceptor.intercept …_sc-lightcontrol.jar/vendor.js:27633:39 在HttpInterceptorHandler.push../node_modules/@angular/common/fesm5 /http.js.HttpInterceptorHandler.handle …_sc-lightcontrol.jar/vendor.js:27004:33 在HttpInterceptingHandler.push../node_modules/@angular/common/fesm5/http.js.HttpInterceptingHandler.handle …sc-lightcontrol.jar/vendor.js:27677:27 在MergeMapSubscriber.project…\u sc-lightcontrol.jar/vendor.js:26755:184 在MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.\u tryNext …_sc-lightcontrol.jar/vendor.js:110070:27 在MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.\u下一步 …_sc-lightcontrol.jar/vendor.js:110060:18 在MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next …\u sc-lightcontrol.jar/vendor.js:101403:18 在可观察状态下.\u subscribe…\u sc-lightcontrol.jar/vendor.js:104821:20 在Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.\u尝试订阅 …_sc-lightcontrol.jar/vendor.js:100628:25

密码 putTest、postTest和patchTest失败，出现上述异常。 最好的作品

---

如果禁用传出请求，则Put/Post&Patch请求可以工作，这在默认情况下是启用的，并尝试读取cookie XSRF-TOKEN

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

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