1.Http Options Method

简而言之，OPTIONS请求方法的主要用途有两个：

• 获取服务器支持的HTTP请求方法；
• 用来检查服务器的性能。

2.CORS(跨域资源共享)

CORS是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。而这种访问是被同源策略所禁止的。CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。

• 前端

客户端使用XmlHttpRequest发起Ajax请求，当前绝大部分浏览器已经支持CORS方式，且主流浏览器均提供了对跨域资源共享的支持。

• 服务器端

如果服务器端未做任何配置，则前端发起Ajax请求后，会得到CORS Access Deny，即跨域访问被拒绝。

因跨域，post请求变options请求（vue）
1、options是什么？

options在此问题中属于第二种，当涉及到跨域时，并且是post请求时，本地服务器会先发送一个options请求到服务器，如果服务器认为options请求时无危险性且认可的，那么在允许本地服务器发送post请求；但是如果后端认为options请求是危险且不成功的那么会直接阻止本地服务器发送其他请求

2、出现场景
本次在做vue后台管理系统时，打包之后利用nginx在本地部署时，涉及到跨域时，post请求会先出现options请求，options请求通过再发送post请求，

3、问题产生：

本次我做的是个后台项目，需要在header中添加Authorization，如下图

总所周知，vue项目config文件夹index下可以通过设置代理解决跨域问题，所以在开发环境中，项目本身运行很OK，但是一经打包，并且利用nginx在本地部署时，问题就暴露了,如下图：

此处options请求成功后，没有发送是因为后端大哥是通过判断header中的Authorization 从而来返回是否成功，而此处虽然状态码为200，但是后端没有拿到Authorization中的token，正常情况如下图：

如何解决：
方法一：
如果后端设置在请求接口处设置，将所有的options（请求头中不带有token值）拦截掉，那么便会产生上述问题，此时在确保自己（前端）无误后，可以通过跟后端协调，将所有options放行，此时便能通过post请求访问到数据。

方法二：（有待验证）
还有一种思路:
如果后端只是设置了在前端请求时判断请求头中是否存在token信息从而来判定是否请求正确，此时和options本身其实没多大关系，我们可以在前端发送请求之前进行拦截，并将token值带上，这样一来便能解决，大致如图所示：

ps：其实如果放在线上，那么这个问题有可能将不存在，因为在同一个域名，同一个服务器下，就不会产生跨域问题，那么就不会出现以上问题

补充：option出现场景和作用
场景：出现在跨域情况下
作用：检测其请求是否安全
理解：相当于你去朋友家玩，先打电话确认，主人是否在家，如果在家及option请求成功，接下来即可请求post/get等，如果失败，则option请求失败，即接下来请求不能发送

3.Preflighted Requests(预检请求)

Preflighted Requests是CORS中一种透明服务器验证机制。预检请求首先需要向另外一个域名的资源发送一个 HTTP OPTIONS 请求头，其目的就是为了判断实际发送的请求是否是安全的。

下面的2种情况需要进行预检：

• 简单请求，比如使用Content-Type 为 application/xml 或 text/xml 的 POST 请求；
• 设置自定义头，比如 X-JSON、X-MENGXIANHUI 等。

 
配置一下content-type

axios.defaults.headers[‘Content-Type’] = ‘application/x-www-form-urlencoded; charset=UTF-8’

建议看的文档：

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS