再次踩坑options预检http请求

新年开篇, 帅哥美女大佬们新年好, 狗年旺旺旺! 新年开始产品狗就要换ui, 好吧换就换!这次换的是自己独立开发的项目, 比较熟悉直接推倒重做, 用时两天时间, 也就遇到了这一个坑!其他还算顺利, 所以改自己写的代码就是爽啊, 希望你们以后也可以尽量'闻'自己的'粑粑'不要'闻'别人的'粑粑'哈哈哈


正文开始

在 vue 项目中目前的请求工具标配是axios, 也是尤大推荐的, 所以用过的应该很了解也很熟悉, 在开发中是要配置 axiosbaseUrl的, 但这个 URL不是直接写死的, 而是根据环境而不同来确定, 在vue 项目结构中, 可以打开config/index.js看到最后有这样一段代码

serverBaseURL: process.env.NODE_ENV === 'production' ? '' : url.xs

这段代码意思是说请求服务器地址是根据是否是线上环境, 如果是的话那么请求默认地址为空, 反之是自己本地开发时候请求的地址 (但是这一块并不是固定的, 根据项目情况而定), 说了这些是什么意思呢? 是因为本地的axios请求地址是要设置这个serverBaseURL才行, 自己开始是直接配置了axiosbaseUrl了,所以发布到线上之后跟线上的服务器地址不同所以出现了跨域情况, 出现了跨域那么请求的时候肯定要发送options请求进行检验, 服务器发现不是我要求的地址肯定不放行, 所以出现了后面的 bug

file

这个项目是伪前后端分离的, 前端代码打包后输出目录还是打包到了后端代码中, 然后在输入后的文件请求是根据相对路径进行请求的, 前面根本不需要https://scm.roadshare.com, 直接/mall/reUser/login就可以了

看下我的axios配置文件

file

顶部导入了刚刚的 config/index.js, 通过 config 的 serverBaseUrl来配置 axios请求地址, 那么打包发布之后就会根据配置请求不同的服务器, 那就不会出现跨域情况也就不会有options请求了


所以, 再次遇到options请求的时候, 首先想到的就是是不是出现了 跨域问题 跨域问题 跨域问题, 给自己敲个警钟!!!

新年快乐!