Angular http to Wiremock stub does选项，而不是使用200删除->页面继续被拒绝

Question

我有一个带有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。因此，各州应该走向成功。但相反，各州注定要失败。浏览器（firefox）网络选项卡显示已拨打200个电话，但这是一个选项，而不是删除。

我读过很多与CORS有关的类似问题。我理解为什么会进行选项调用，但我不理解为什么该方法在收到200（即使是另一种类型）时选择进入onRejected。

提前感谢您抽出时间。

Answer 1

也许你解决了这个问题，但我为其他人负责。

当您从角发送请求并且它与“GET”不同时，角发送两个请求（CORS策略）：

• 首先，它发送一个选项，检查是否允许“删除”操作（或其他操作）
• 如果此请求收到带有适当标题的200，Angular将发送删除请求

因此，您需要在wiremock中创建两个存根：

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

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

当做

Answer 2

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

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