前端使用Vuex+axios全局拦截器,后端Python Flask碰到OPTIONS预检的问题

目录

情况说明

错误原因


情况说明

最近在使用Vuex管理token,axios做为全局拦截器的时候,一直碰到如下问题

前端使用Vuex+axios全局拦截器,后端Python Flask碰到OPTIONS预检的问题

起先,我以为是跨域的问题,可是怎么想都不对,我后端Flask加了跨域的。于是各种百度想解决vue的跨域、axios的跨域,都不行(前端知识太薄弱...)

然后在Flask里打印,出现如下

前端使用Vuex+axios全局拦截器,后端Python Flask碰到OPTIONS预检的问题

 

也就是说,根本没有走到GET方法,只有OPTIONS的

错误原因

在使用axios做为全局拦截器的时候出现了,后端Flask有一个JWT验证,拦截了一开始会出现的OPTIONS请求

解决方法

在这里,我是用了比较笨的暴力解决,直接当请求为OPTIONS的时候,pass掉,这样就可以得到之后的方法

前端使用Vuex+axios全局拦截器,后端Python Flask碰到OPTIONS预检的问题

补充

一、什么是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

前端项目结构

前端使用Vuex+axios全局拦截器,后端Python Flask碰到OPTIONS预检的问题

 

router.js

前端使用Vuex+axios全局拦截器,后端Python Flask碰到OPTIONS预检的问题

store.js

前端使用Vuex+axios全局拦截器,后端Python Flask碰到OPTIONS预检的问题

main.js

前端使用Vuex+axios全局拦截器,后端Python Flask碰到OPTIONS预检的问题

前端使用Vuex+axios全局拦截器,后端Python Flask碰到OPTIONS预检的问题

 

二、Flask后端JWT的Token验证

前端使用Vuex+axios全局拦截器,后端Python Flask碰到OPTIONS预检的问题

前端使用Vuex+axios全局拦截器,后端Python Flask碰到OPTIONS预检的问题

前端使用Vuex+axios全局拦截器,后端Python Flask碰到OPTIONS预检的问题

前端使用Vuex+axios全局拦截器,后端Python Flask碰到OPTIONS预检的问题

前端使用Vuex+axios全局拦截器,后端Python Flask碰到OPTIONS预检的问题