起因
为了实现的登录,获取用户信息这一个功能,我是采用cookie获取用户的相关信息,没有采用JWT令牌校验用户。然而出现前端请求未携带cookie,导致后端无法识别,从而无法获取用户的相关信息。
解决过程
- 经过查询前端的网络请求,才发现在向后端发起
current
接口请求,请求头未携带登录时的cookie值,根据cookie的作用,自然后端的httpServeltResp
无法解析这个这个接口请求,尽管这个接口返回的状态时200
。根据网上的提示,加这一行代码就可以了。
axios.defaults.withCredentials = true
- 然而出现了报错!!!前端提示出现了跨域,经过后来一番查询,得知在前后端分离的项目cookie是不能进行
流通
的,不仅前端加上面的一行代码,在后端全局跨域配置类文件也要加上。加上allowCredentials,其实跟前端的代码是一样的作用,都是对cookie能够在浏览器实现跨域发挥作用的。
@Configuration
public class CorsMapping implements WebMvcConfigurer {
@Override
/**
* 重新跨域支持方法
* CorsRegistry 开启跨域注册
*/
public void addCorsMappings(CorsRegistry registry) {
//addMapping 添加可跨域的请求地址
registry.addMapping("/**")
//设置跨域 域名权限 规定由某一个指定的域名+端口能访问跨域项目
// 发起请求的源地址(也就是你的前端项目的地址)
.allowedOrigins("http://127.0.0.1:5173")// 这是我的前端项目端口号,你的可能不一样,可能是需要改了一下的
// .allowedOriginPatterns("*")
//是否开启cookie跨域
.allowCredentials(true)
//规定能够跨域访问的方法类型
.allowedMethods("GET","POST","DELETE","PUT","OPTIONS")
//添加验证头信息 token
.allowedHeaders("*")
//预检请求存活时间 在此期间不再次发送预检请求
}
}
PS: 在设置allowCredentials为true时,我们是不能将allowedOrigins设置成所有的域名都可以访问,就就是设置成“*”,如果你这么做了的话,后端会报错,并告诉你这两者基于安全,是不能同时这样设置的(别问,我也不清楚为什么[苦笑])。
- 恭喜,到这里我的问题还是没有得到解决(快奔溃了),尽管前端没有报错跨域的问题,可以
current
接口请求还是没有携带cookie值,这让我百思不得其解,正当我要放弃的时候!我发现有网友这么说:
这才恍然大悟,原来是浏览器得到了升级,从而在“从中作梗”,然后我就在项目的全局配置文件,对cookie进行设置!
这是为什么,我借助大佬的提供的图片,才懂了,还是因为安全(苦笑)
- 解决!
current
接口请求可以携带了cookie值
尾声
- 为了解决这个问题,又重新学习了cookie作用和原理以及(该死)的跨域知识。
- 现在我算是对cors配置文件的每个参数设置都要自己的理解,以及起到的作用,我也算是清楚了。
- 不放弃,换个角度思考,换个角度提出问题,从而找到答案!