使用 POST 方法使用 Ionic/Angular 发布时失败答案

【问题标题】：Failed when posting with Ionic/Angular using POST method使用 POST 方法使用 Ionic/Angular 发布时失败
【发布时间】：2018-12-10 21:01:44
【问题描述】：

这个问题刚刚发生并开始像这样突然发生，显然完全没有原因。它根本没有完成从 POST 方法调用到 webservice 的请求。

老实说，我看不出代码中有任何问题，即使它刚刚正常工作。

最糟糕的是，在 Chrome 控制台中没有显示任何错误，只显示失败点：

polyfills.js:3 
XHR failed loading: OPTIONS "http://MY-SERVER:5000/profiles/set-logged-profile".

s @ polyfills.js:3
t.scheduleTask @ polyfills.js:3
onScheduleTask @ polyfills.js:3
t.scheduleTask @ polyfills.js:3
r.scheduleTask @ polyfills.js:3
r.scheduleMacroTask @ polyfills.js:3
(anonymous) @ polyfills.js:3
o.(anonymous function) @ polyfills.js:2
(anonymous) @ http.js:1630
Observable._trySubscribe @ Observable.js:43
Observable.subscribe @ Observable.js:29
(anonymous) @ subscribeTo.js:21
subscribeToResult @ subscribeToResult.js:11
MergeMapSubscriber._innerSub @ mergeMap.js:74
MergeMapSubscriber._tryNext @ mergeMap.js:68
MergeMapSubscriber._next @ mergeMap.js:51
Subscriber.next @ Subscriber.js:54
(anonymous) @ scalar.js:5
Observable._trySubscribe @ Observable.js:43
Observable.subscribe @ Observable.js:29
MergeMapOperator.call @ mergeMap.js:29
Observable.subscribe @ Observable.js:24
FilterOperator.call @ filter.js:15
Observable.subscribe @ Observable.js:24
MapOperator.call @ map.js:18
Observable.subscribe @ Observable.js:24
TakeUntilOperator.call @ takeUntil.js:17
Observable.subscribe @ Observable.js:24
webpackJsonp.620.HomePage.ionViewWillEnter @ home.ts:134
ViewController._lifecycle @ view-controller.js:486
ViewController._willEnter @ view-controller.js:384
NavControllerBase._willEnter @ nav-controller-base.js:780
(anonymous) @ nav-controller-base.js:673
t.invoke @ polyfills.js:3
onInvoke @ core.js:14191
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
NgZone.run @ core.js:14105
NavControllerBase._viewsWillLifecycles @ nav-controller-base.js:667
Animation._fireBeforeReadFunc @ animation.js:723
Animation._beforeAnimation @ animation.js:652
Animation._playDomInspect @ animation.js:346
requestAnimationFrame (async)
Platform.raf @ platform.js:538
(anonymous) @ animation.js:292
requestAnimationFrame (async)
Platform.raf @ platform.js:538
Animation.play @ animation.js:291
NavControllerBase._transitionStart @ nav-controller-base.js:605
(anonymous) @ nav-controller-base.js:533
t.invoke @ polyfills.js:3
onInvoke @ core.js:14191
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
(anonymous) @ polyfills.js:3
t.invokeTask @ polyfills.js:3
onInvokeTask @ core.js:14182
t.invokeTask @ polyfills.js:3
r.runTask @ polyfills.js:3
o @ polyfills.js:3
Promise.then (async)
r @ polyfills.js:3
t.scheduleTask @ polyfills.js:3
onScheduleTask @ polyfills.js:3
t.scheduleTask @ polyfills.js:3
r.scheduleTask @ polyfills.js:3
r.scheduleMicroTask @ polyfills.js:3
f @ polyfills.js:3
c @ polyfills.js:3
(anonymous) @ polyfills.js:3
Animation._didFinish @ animation.js:994
Animation._didFinishAll @ animation.js:981
onTransitionEnd @ animation.js:428
onTransitionEnd @ platform.js:610

我正在使用 RxJs 6+ 和 Angular 7+，在发出 POST 请求的“服务”代码下方：

  public sendPost(url: string, payload: any, showLoading: boolean = true) {
    if (this.isConnected) {
      this.loadingStatus(showLoading);
      let endPoint: string = this.setEndPoint(url);
      let headers: any = this.requestHeaders();
      console.log('ENDPOINT: ' + endPoint);
      let observable$: Observable < any > = this.http.post(endPoint, payload, headers);
      observable$.pipe(
        retryWhen(genericRetryStrategy()),
        tap(() => {
          console.log("HTTP POST request executed and finished");
          this.loadingStatus(false);
        }),
        catchError(err => {
          this.loadingStatus(false);
          return throwError(err);
        }));
      return observable$;
    } else {
      return this.error$;
    }
  }

以前有人遇到过这种情况吗？

【问题讨论】：

错误消息提到 OPTIONS 请求这一事实表明您遇到了 CORS 问题。您需要设置 webpack 开发服务器代理，或配置后端以允许跨域请求。

标签： angular ionic3 rxjs6

【解决方案1】：

找到问题了。

订阅时，我有一个“takeUntil”，并且我为可观察到的驱逐舰设置了错误的值：

this.destroy$.next(false); // changed to false
this.destroy$.complete(); // and added this

this.profileService.setLoginProfile(profieData, false)
  .pipe(takeUntil(this.destroy$))
  .subscribe((profile) => {
    this.help.preferences.profile = profile;

    this.help.tabEnabled = true;

    this.destroy$.next(true);

  }, error => {
    this.help.showToast(error.message);
  });

【讨论】：