在前端开发中，我们通常使用XMLHttpRequest对象来向后端发送HTTP请求。但是有时候，我们会遇到一种情况：当我们使用POST方法发送请求时，实际上它被转换成了OPTIONS请求。这种情况可能会导致一些问题，例如后端无法正确处理我们的请求。下面我们就来探讨一下这个问题的原因以及解决方案。
问题原因
这个问题的根源在于跨域资源共享（CORS）规范中的预检请求机制。简单来说，在某些情况下，浏览器会先发送一个OPTIONS请求来询问服务器是否允许跨域请求。如果服务器返回的响应头中包含了Access-Control-Allow-Origin等关键字，那么浏览器才会发送实际的POST请求。否则，浏览器将不会发送POST请求，并且会抛出一个错误。这个机制的目的是保护用户的隐私和安全。
具体而言，以下两种情况会触发浏览器发送OPTIONS请求：
- 发送跨域请求时，请求方式为POST、PUT或DELETE。
- 在JavaScript代码中设置了自定义的请求头字段。
解决方案
既然我们知道了问题的原因，那么解决方案也就呼之欲出了。具体来说，我们可以采取以下两种方案：
方案一：在服务器端设置响应头
如果你有充分的权限来修改服务器端的代码，那么这个方案非常简单。只需要在服务器返回的响应头中添加Access-Control-Allow-Origin等关键字即可。例如，下面是一个Node.js Express应用程序的示例代码：
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});这段代码会在所有请求的响应头中添加Access-Control-Allow-Origin和Access-Control-Allow-Headers字段，允许任意域名跨域访问。当然，你也可以根据需要进行更细粒度的配置。
方案二：修改XMLHttpRequest对象
如果你无法修改服务器端的代码，那么我们就需要在前端代码中做出相应的改动。具体而言，我们需要重写XMLHttpRequest对象的send方法，使得它不再发送OPTIONS请求。下面是一个示例代码：
-- -------------------- ---- -------
--- --- - --- -----------------
--- ------- - ---------
-------- - ---------- -
--- ------ - -------------
-- --------------------- --- ------- -
------------ - ----------
-
------ ------------------- -----------
--这段代码会将所有使用POST方式发送的请求都转换成OPTIONS请求。当然，如果你希望只对特定的请求进行处理，可以加上一些判断逻辑。
总结
本文介绍了XMLHttpRequest对象将POST请求转换成OPTIONS请求的原因以及两种解决方案。在实际开发中，我们应该根据具体情况来选择合适的方案。同时，我们也需要注意跨域请求的安全性，避免被恶意攻击。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27373