首先介绍一下需求:前端使用vue部署nginx,后端使用springboot打成jar直接服务器上跑,在部署过程有一系列问题,现做以总结(不想看过程的解决方法在最后)

1.首先一开始vue配置了代理,访问后端没有问题,但需求中有一个地方是向后端get请求时服务器给一个session(a请求),然后前端另一个地方像后端get时带session(b请求),一开始发现两者session不同,发现时b请求写成了<a>超链接的格式,这样ab的session是不同的(b这种超链接请求和你在浏览器地址栏直接输入接口地址的session是一样的)

2.为了解决上述问题,并且没有权限更改nginx的配置文件,所以将vue中所有的请求写死,成为了跨域请求,并在后端配置了@crossOrigin(这里还有一个问题,我配置的时候@crossOrigin(allCredentials="true"),网上说这时的origins不能为*,但我没配置这个参数,源码里默认是*也没报错),这时请求发生了每次session都会变化的情况

3.出现了2的错误之后,我在浏览器开发者工具中进行了调试(火狐浏览器),写的ajax跨域访问接口发现sessionId是不会变的,于是进行了一波分析,sessionId是每次请求服务器时,sevlet容器会新建一个httpSession对象,并将唯一的sessionId通过cookie传给前端,前端拿到之后下次请求会通过cookie的方式带着这个sessionId去服务器找对应的httpSession对象,从而获得session的数据,如果你没通过cookie的方式带着上次的sessionId,服务器就会给你分配一个新的sessionId,并新建一个httpSession对象(不理解的可以想想奶茶店的积点卡,你每次买奶茶会给你积点,但如果你没带卡去,就会给你发一张新的积点卡)

4.通过3的分析和调试,发现在vue的开发环境中(chrome),每次请求不会携带cookie,但火狐浏览器会携带,最后通过查询发现要更改chrome的SameSite参数,但在chrome://flags找并没有找到这个参数

5.最后发现在chrome的某个版本之后,这个参数就取消了,如果一定需要chrome,那么只能新建快捷方式并在快捷方式里添加参数,具体参考下方链接
 

90版本以上配置跨域请求携带cookie

由此可见时chrome的锅了,怎么能发现的呢?是在一次无意中将项目部署上服务器时,发现每次的请求都是携带cookie的,最后在前端开发人员的电脑上装了火狐,进行开发环境测试,也发现每次都带cookie了

总结:

1.尽量使用代理解决跨域问题

2.如果要进行跨域请求,注意几点:后端是否配置跨域,后端跨域配置的参数是否合理

3.如果前端需要上送cookie(也就是携带sessionId),那么需要在vue中配置withCredentials = true,并且在后端也要配置allowCredentials = "true"

4.最后,如果发现开发环境发送请求不带cookie,部署服务器带,那么注意开发调试时的浏览器是否是chrome,如果是要么换火狐,要么对chrome进行配置,配置时要注意90版本以下和以下配置要求是不一样的,具体以上方链接和百度为准

Logo

前往低代码交流专区

更多推荐