Angular http 到 Wiremock 存根执行 Option 而不是 Delete 与 200 -> 页面继续 onRejected答案

【问题标题】：Angular http to Wiremock stub does Option instead of Delete with 200 -> Page continues to onRejectedAngular http 到 Wiremock 存根执行 Option 而不是 Delete 与 200 -> 页面继续 onRejected
【发布时间】：2019-11-02 05:51:51
【问题描述】：

我有一个带有 WireMock 存根的 AngularJS 应用程序。有一个按钮调用/api/deleteThis的方法，使用如下代码：

onDeleteButtonClick() {
    this._deleteThis()
      .then(() => {
          this._setState(States.SUCCESS);
      })
      .catch(() => {
        this._setState(States.FAIL);
      });
  }

和

  private _deleteThis() {
    return this.$http.delete('http://localhost:8080/api/deleteThis');
  }

我的 WireMock 文件：

{
  "request" : {
    "urlPattern" : "/api/deleteThis",
    "method" : "DELETE"
  },
  "response" : {
    "status" : 200,
    "body" : "{}",
    "headers" : {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin" : "*",
      "Access-Control-Allow-Methods" : "*",
      "Access-Control-Allow-Headers": "Content-Type"
    }
  }
}

和

{
  "request" : {
    "urlPattern" : "/api/deleteThis",
    "method" : "OPTIONS"
  },
  "response": {
    "status": 200,
    "headers": {
      "Access-Control-Allow-Origin" : "*",
      "Access-Control-Allow-Methods" : "POST, GET, OPTIONS, DELETE, PUT, PATCH",
      "Access-Control-Allow-Headers": "Content-Type"
    }
  }
}

我的期望：当函数激活时，它应该调用 Mock 并收到 200。因此，States 应该转到 SUCCES。但相反，状态被设置为 FAIL。浏览器 (firefox) 网络选项卡显示已进行 200 调用，但它是 OPTION 而不是 DELETE。

我已经阅读了很多与 CORS 相关的类似问题。我明白为什么要进行 OPTION 调用，但我不明白为什么该方法在收到 200 时选择进入 onRejected（即使它是另一种类型）。

提前感谢您的宝贵时间。

【问题讨论】：

标签： java angularjs cors wiremock

【解决方案1】：

要获取更多信息，请记录错误响应：

onDeleteButtonClick() {
    this._deleteThis()
      .then(() => {
          this._setState(States.SUCCESS);
      })
      .catch((error) => {
        console.log(error);
        this._setState(States.FAIL);
      });
  }

【讨论】：