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

问题描述

我有一个带有 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 (即使它是另一种类型)。

提前感谢您的宝贵时间。

标签: javaangularjscorswiremock

解决方案


要获取更多信息,请记录错误响应:

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

推荐阅读