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:其实如果放在线上,那么这个问题有可能将不存在,因为在同一个域名,同一个服务器下,就不会产生跨域问题,那么就不会出现以上问题

另外,推荐一个插件qs,对请求的参数或者相应的参数进行一些处理,可以在一定程度上避免出现一些关于options的其他问题
https://www.npmjs.com/package/qs

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

问题本身因环境所致,并非适用于所有问题,问题定位准确,希望能帮到大家,欢迎纠错!

Logo

快速构建 Web 应用程序

更多推荐