一个前后端分离项目上线因OPTIONS请求403引发的思考

最近在上线Vue+Vue Router(history模式)的前后端分离项目时，发现所有的 预检请求（preflight request）都403报错。然而后端反馈已经添加注解允许跨域（具体如何操作，本文暂不描述，可以去自行搜索）。于是排查是否是nginx不支持options请求，并成功定位问题。

于是思考如何避免这个问题：

1. 不使用跨域

2. 不发送options预检请求

最后商量决定使用第二张方法。

下面总结一下 关于options 请求的一些http知识，这些在MDN上有具体描述。我只描述一些个人理解。

浏览器为什么要发送预检请求

规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）。

CORS请求失败会产生错误，但是为了安全，在JavaScript代码层面是无法获知到底具体是哪里出了问题。你只能查看浏览器的控制台以得知具体是哪里出现了错误。

什么情况下发送预检请求

关于这个问题，我们要首先知道什么叫简