为什么Axios发送OPTIONS请求方法而不是DELETE或PUT方法？

Question

当我使用axios.delete（url）或axios.put（）发送请求时，但是当我在Chrome Dev Tools中检查请求时，请求方法为OPTIONS，Access-Control-Request-Method为DELETE或PUT，像这样：

- Hieu Vu

---

您正在向不存在的端点发送请求。 - Hosar

@Hosar 当然我发送了Delete方法。但它发送了Options请求。这就是我在这里询问的原因。 - Hieu Vu

Answer 1

DELETE或PUT（或其他非简单请求）首先会发送一个预检OPTIONS请求，确定是否允许发送该请求。请求方法在Access-Control-Request-Method头中给出。

更多信息请参见 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests。

- Phillip

---

也许您已经有了。但是如果您得到了404错误，它就不会继续发送DELETE或者PUT请求。 - Phillip

我认为我收到了404错误，因为请求是OPTIONS而不是DELETE。 - Hieu Vu

什么是后端？如果是IIS，你可能需要添加OPTIONSVerbHandler。 - Anthony

是的，要支持CORS，必须支持OPTIONS。一种简单的方法（但不是“正确”的方法）是拦截任何OPTIONS请求，将Access-Control-Allow-Origin和Access-Control-Allow-Headers设置为所需内容，然后返回状态200。 - Phillip

@Tony 我其实不太清楚。我在前端工作，经理只是把API发给了我。我之前测试过API，没有任何问题。所以我认为问题可能出在前端。 - Hieu Vu

@Phillip 已经明白了。谢谢 ^^ - Hieu Vu

Answer 2

Axios使用JSON作为默认的内容类型，调用始终作为OPTIONS调用而不是POST方法。为了克服这个问题，我们需要正确设置“Content-Type”。我的配置如下：

let config={
    headers: {'Content-Type' : 'application/x-www-form-urlencoded'}
}
return axios.post(postUrl,postJson,config).then(response=>{
     return response.data;
 }).catch(error=>{
     return error;
 });

- Khandaker Toihidul Islam