我的项目的springboot+vue前后端分离项目，在做给项目中增加JWT验证时出现了许多的问题，因此写这篇博客来记录遇到的问题以及解决方法
在给项目中增加jwt的token验证的时候（将token放在请求头中），后端获取不到我在前端请求头中封装好的token信息，为了解决这个问题，查阅了许多资料，在解决问题的过程中也遇到了许多新的问题，接下来就跟大家一一讲述
下面的解决方案会默认是配置了jwt拦截器验证的，jwt拦截器不知道怎么配置的跨域去看看我的jwt学习笔记博客里面有
如果讲解的有不明白的可以私信我
跨域
最初我的项目是不存在跨域问题的，但是我问了下老师我的后端接为什么收不到请求头中的信息，老师帮我看了看，怀疑可能是我的跨域没有配置好产生的问题，然后老师发了一份他的跨域配置给我来进行配置，结果更换跨域配置后就真的是出现了跨域问题
这是报的错误信息：
The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
到了后面就算我把配置修改回来，也会报错。
经过不断的查阅资料和修改后端，我的项目终于又不会出现跨域的错误，以下讲述如何配置
- 在控制器中全部加入@CrossOrigin注解
- 不知道为什么我的项目就算加入了@CrossOrigin注解也还是会报错，还需要加入WebMvcConfig配置类才没报错
讯享网 - 把其它配置跨域的配置取消，只需要这两个就行了
到这里，我的跨域错误问题解决了，但是我最初的问题还是没有解决——后端获取请求头中的信息为null，请往下面继续看
前端往请求头中放入数据
先给大家放上我封装好了的axios代码
讯享网
首先你的token数据是在登录的时候由后端返回的，然后前端接收并存储，我是选择使用localStorage来进行存储
这个时候你的localStorage中就会存在token了，然后我们封装一个请求拦截器，让前端axios在每次给后端发送请求的时候都会携带上该请求头数据
注意：如果不适用请求拦截器来设置请求头中的token，而是利用全局默认请求头设置，那么你的请求头中token信息不会进行更新，就算重新登录，携带的也会是原来的token，而不是新的token。
特别注意：请求头中储存token数据的一定是Authorization，不能是其它名字
OPTIONS的问题
首先我讲一下我是怎么发现这个问题的：我在controller中去获取我的请求头中的信息，是可以获取到的，但是在JWT验证的拦截器中无法获取得到。
原因：
实际上发送了两次请求，第一次为 OPTIONS 请求，第二次才 GET/POST… 请求在OPTIONS请求中，不会携带请求头的参数，所以在拦截器上获取请求头为空。
自定义的拦截器拦截成功第一次请求不能通过，就不能获取第二次的请求了 GET/POST…第一次请求不带参数，第二次请求才带参数
解决：在拦截器的最上面加上这段话
讯享网
到了这里基本问题就解决了，再给大家扩展一个注意点：
拦截器需要放行静态资源
如果你是配置了虚拟路径，那么你需要放行它的路径，否则会访问不到它的资源
最后我就把我相关的所有代码都放上来供大家参考：
jwt工具类
jwt拦截器
讯享网
jwt拦截器配置
跨域配置
讯享网
前端axios封装
这次遇到的问题让我对vue和springboot的跨域问题理解的更加深刻，也加深了我对于vue的理解学习。解决遇到的bug的过程就是学习的过程，加油！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/160543.html