前端使用Vuex+axios全局拦截器,后端Python Flask碰到OPTIONS预检的问题
目录
情况说明
最近在使用Vuex管理token,axios做为全局拦截器的时候,一直碰到如下问题
起先,我以为是跨域的问题,可是怎么想都不对,我后端Flask加了跨域的。于是各种百度想解决vue的跨域、axios的跨域,都不行(前端知识太薄弱...)
然后在Flask里打印,出现如下
也就是说,根本没有走到GET方法,只有OPTIONS的
错误原因
在使用axios做为全局拦截器的时候出现了,后端Flask有一个JWT验证,拦截了一开始会出现的OPTIONS请求
解决方法
在这里,我是用了比较笨的暴力解决,直接当请求为OPTIONS的时候,pass掉,这样就可以得到之后的方法
补充
一、什么是OPTIONS预检
HTTP 的 OPTIONS 方法
用于获取目的资源所支持的通信选项。客户端可以对特定的 URL 使用 OPTIONS 方法,也可以对整站(通过将 URL 设置为“*”)使用该方法。
二、OPTIONS预检是用来干嘛的
可以使用 OPTIONS 方法对服务器发起请求,以检测服务器支持哪些 HTTP 方法
三、CORS 中的预检请求
在 CORS 中,可以使用 OPTIONS 方法发起一个预检请求,以检测实际请求是否可以被服务器所接受。预检请求报文中的 Access-Control-Request-Method
首部字段告知服务器实际请求所使用的 HTTP 方法;Access-Control-Request-Headers
首部字段告知服务器实际请求所携带的自定义首部字段。服务器基于从预检请求获得的信息来判断,是否接受接下来的实际请求。
服务器所返回的 Access-Control-Allow-Methods
首部字段将所有允许的请求方法告知客户端。该首部字段与 Allow
类似,但只能用于涉及到 CORS 的场景中。
资料摘自
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods/OPTIONS
代码分享(axios全局拦截器、Flask后端JWT的Token验证)
一、前端 axios全局拦截器(参考一位老哥的,附上链接,再次感谢https://blog.****.net/qq_34825875/article/details/79569579)
前端项目结构
router.js
store.js
main.js