AngularJS调用DELETE接口触发OPTIONS后进入失败回调问题

看起来你的问题出在CORS预检响应缺少对AngularJS默认请求头的支持，导致浏览器在OPTIONS预检通过后并未发送实际的DELETE请求，进而让AngularJS的$http promise进入失败回调。

问题根源 #

AngularJS的$http服务默认会给所有请求添加X-Requested-With: XMLHttpRequest请求头，但你的WireMock OPTIONS存根的Access-Control-Allow-Headers只允许了Content-Type。浏览器在预检时发现请求会携带未被允许的头，就会阻止发送后续的DELETE请求——而AngularJS会把这种“请求未发送成功”的情况判定为失败，触发catch回调。

你提到Firefox只显示OPTIONS请求，也完全符合这个场景：浏览器完成预检后认为不允许发起实际请求，所以没有发送DELETE请求。

解决方案 #

修改WireMock的OPTIONS存根，将X-Requested-With添加到Access-Control-Allow-Headers中（或者直接设为*简化配置，若无需限制特定请求头）：

{
  "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, X-Requested-With"
    }
  }
}

验证步骤 #

1. 重启WireMock以加载更新后的存根配置
2. 清空浏览器缓存后重新测试
3. 查看Firefox网络面板：此时会先看到200状态的OPTIONS请求，紧接着会出现200状态的DELETE请求
4. AngularJS的then回调会被触发，状态将正确设置为SUCCESS

补充说明 #

如果你的应用还有其他自定义请求头，也需要将它们添加到Access-Control-Allow-Headers列表中。另外，Access-Control-Allow-Headers: *虽然能简化配置，但如果请求需要携带凭证（如Cookie），这个通配符会失效，必须明确列出所有允许的请求头。

内容的提问来源于stack exchange，提问作者Michael