springboot + vue前后端分离解决每次请求session不一致的问题

最新推荐文章于 2024-03-10 18:37:18 发布
最新推荐文章于 2024-03-10 18:37:18 发布
阅读量3.5k 收藏 14
点赞数 3
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/haoprivate/article/details/132412051
版权
文章讲述了在Vue项目中实现验证码功能时遇到跨域和session问题，通过调整axios的withCredentials设置，发现是前端路径配置导致的Set-Cookie问题。最终在vite.config.ts中配置proxy解决了跨域问题，确保sessionid一致并能获取存储数据。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在一个项目中做验证码功能，一开始思路是：前端发送请求让后端处理，使用了hutools验证码工具类，直接使用输出流进行输出到页面中，于是使用seesion进行存储验证码，在校验验证码输入是否正确时，再发送请求给后端，获取sesson中存储的数据，一遍遍测试之后发现每次的存储的数据都为空（项目提前做好了跨域）。

上网搜索相关资料，有使用拦截器，过滤器或者使用Interceptor的方法，但总结下来就是配置跨域，但项目中已经有了跨域，但没有使用跟其余人一样的做法。试了很多次才发现不是跨域问题，而是前端配置问题。

一、 跨域

如果你遇到了这种问题首先就是先做好跨域，可参考SpringBoot和Vue跨域Session不是同一个怎么解决（不用Redis）_springboot 不使用 redis_Keeling1720的博客-优快云博客

二、前端配置

项目使用的是vite来构建vue，使用axios发送请求，所以首先在自己封装的请求中设置好前端请求的withCredentials属性为true，让其请求时携带cookie。特别提醒：typescript与JavaScript无特大差异，以下代码都可直接使用

可放main.js或main.ts或http.ts中


                

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        


    

      

        

            

              
                
                  haoprivate
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
springboot+vue前后端分离多次请求sessionid不同的解决方法

				
			

			

				

					weixin_53281846的博客
				

				

					05-02
					
					2750
					
				

			

		

		

			
				
耗时两天最终找到的springboot+vue前后端分离多次请求sessionid不同的解决方法，希望能有所帮助

			
		

	



                

            
              



	

		

			

				
					
Spring Boot项目每次请求Session都不一样的记录

				
			

			

				

					chunfupang6336的博客
				

				

					06-25
					
					7373
					
				

			

		

		

			
				
背景
网站注册模块有个带图片验证码验证的环节，实现思路为：前端请求获取图片验证码的接口，接口里生成图片验证码，并保存在session；验证图片验证码时，从session中获取图片验证码与当前请求参数作比较，从而实现图片验证的过程。
问题
涉及两个接口：生成验证码和验证验证码。生成时，没有问题；...

			
		

	



              


  
              

                


	

		

			

				
					
springboot+vue前后端分离session跨域每次id不同

				
			

			

				

					qq_28174545的博客
				

				

					12-03
					
					2750
					
				

			

		

		

			
				
今天基于springboot+vue写了一个基本的前后端分离项目，但是当我从后端传入session时，我在前端取出的值都是null，于是我开始排查bug，首先我在后端的方法中输出session，看看当前方法session是否已经存入了值，此时发现，当前方法有值，但是其他的方法时没有值的，然后我突然意识到，在vue项目中axios请求后端api的时候，每一次都是开启了一个新的会话，也就是说取到的session不是同一个。

于是我通过System.out.println(sess...

			
		

	





	

		

			

				
					
Springboot  前端请求的每次sessionid 都不同

				
			

			

				

					默默不代表沉默
				

				

					10-14
					
					7636
					
				

			

		

		

			
				
1. 先检测浏览器是否有设置禁止保存第三方cookie信息

2.跨域问题处理



后端代码：



添加跨域配置（参考我这篇）：https://blog.csdn.net/qq_35387940/article/details/106123805





一般出现跨域问题，就是因为前后端分离导致的。



前端代码：

vue：


axios.defaults.withCredentials = true;






...

			
		

	



		

			
		



	

		

			

				
					
Spring 处理跨域请求

				
			

			

				

					weixin_42683274的博客
				

				

					06-02
					
					747
					
				

			

		

		

			
				
Spring 处理跨域请求

			
		

	





	

		

			

				
					
springboot-vue前后端分离项目跨域session不一致的问题

				
			

			

				

					oldlimu的博客
				

				

					04-01
					
					9799
					
				

			

		

		

			
				
1.
springboot+vue前后端分离项目的跨域问题




2.
springboot+vue前后端分离  项目跨域每次访问后端接口sessionid不一致的问题


如果在后端配置了跨域注解@CrossOrigin

如果直接前端访问后端的




			
		

	





	

		

			

				
					
vue项目axios每次请求session不一致

				
			

			

				

					lilongwei4321的博客
				

				

					09-18
					
					8938
					
				

			

		

		

			
				
1、vue开发后台管理项目，登录后，请求数据每次session都不一致，后台返回未登录，处理方法打开main.js设置：


// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alia...

			
		

	





	

		

			

				
					
vue+springboot前后端分离实现单点登录跨域问题解决方法

				
			

			

				

					08-28
				

			

		

		

			
				
Vue+SpringBoot前后端分离实现单点登录跨域问题解决方法  单点登录概述  单点登录（Single Sign-On，SSO）是指用户只需登录一次，即可访问所有相关的应用系统，而不需要在每个系统中重复登录。这种机制可以提高用户...

			
		

	





	

		

			

				
					
SpringBoot+vue前后端分离博客项目

				
			

			

				

					weixin_46585492的博客
				

				

					03-22
					
					1565
					
				

			

		

		

			
				
SpringBoot+vue前后端分离博客项目   后端项目交作业了！！！

			
		

	





	

		

			

				
					
一看就懂！Springboot +Shiro +VUE 前后端分离式权限管理系统

					
热门推荐

				
			

			

				

					大誌的博客
				

				

					04-15
					
					6万+
					
				

			

		

		

			
				
前段日子写过一篇关于SpringBoot+Shiro的简单整合的例子，那个例子并不适用于我们目前的前后端分离开发的趋势。我之前写过一个项目也是用到了Shiro的前后端分离，某度了许久也没找到解决方案，什么去掉shiroFilter.setLoginUrl();也阻止不了讨人厌的login.jsp的出现。直到我看到了renren-fast的源码...废话不多说，让我们来看看如何实现吧

前后端分离...

			
		

	





	

		

			

				
					
解决vue项目axios每次请求session不一致的问题

				
			

			

				

					01-18
				

			

		

		

			
				
1、vue开发后台管理项目，登录后，请求数据每次session都不一致，后台返回未登录，处理方法打开main.js设置：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
require('es6-promise')

			
		

	





	

		

			

				
					
解决前后端分离 vue+springboot 跨域 session+cookie失效问题

				
			

			

				

					01-19
				

			

		

		

			
				
环境： 前端 vue ip地址：192.168.1.205 后端 springboot2.0 ip地址：192.168.1.217 主要开发后端。 问题： 首先登陆成功时将用户存在session中，后续请求在将用户从...后台添加过滤器，因为前后端分离，不可能每个方

			
		

	





	

		

			

				
					
请求的session为null 或 每次请求的session都不同的问题。

				
			

			

				

					Xiaofeng_Lu__的博客
				

				

					08-17
					
					5253
					
				

			

		

		

			
				
在项目开发中，使用了session保存邮箱验证的验证码，当使用swagger测试时没有问题，但是vue项目中测试的时候，明明验证码都发送成功了，也填写了发送过来的验证码，却返回“验证码未发送”。这是验证验证码的代码，返回“验证码未发送”，则可以知道，该浏览器在服务器的session为null，即传过来的sessionid为空，因为服务器要根据请求cookie中的sessionid找服务器中对应的session。可是，......

			
		

	





	

		

			

				
					
Springboot+vue跨域+登录拦截问题,前端获取不到session,每次请求sessionid变化

				
			

			

				

					qq_39743892的博客
				

				

					10-23
					
					3069
					
				

			

		

		

			
				
为了解决这个问题,狠狠的恶补了浏览器相关方面的知识,发现虽然访问了页面,获得了数据,但访问前端的网址,浏览器里并没有cookie记录以及session记录,得出结果,问题在于登录上.在f12的network中仔细排查后发现,默认的主页虽然获取到了信息,但是没cookie记录,而每点一次登录,登录的请求头中的cookie存的sessionid都不一样.//允许所有的请求类型。配置了cros后,前端能成功接受到数据,本以为皆大欢喜了,但是后端做了登录拦截后,发现所有拦截的页面都报跨域错误,而取消拦截后正常.

			
		

	





	

		

			

				
					
前后端分离不存在会话，sessionid不一致问题

				
			

			

				

					qq_56921846的博客
				

				

					08-30
					
					2094
					
				

			

		

		

			
				
在上面的代码中，我们使用fetch函数向后端发送了一个GET请求，并设置了请求头中的Content-Type为application/json;后端代码：在上面的拦截器中，我们设置了Access-Control-Allow-Credentials等跨域请求头。在上面的配置类中，我们创建了一个CorsInterceptor对象，并将其注册到InterceptorRegistry中，从而实现了使用拦截器解决跨域问题。

			
		

	





	

		

			

				
					
Vue每次请求sessionId都不一样

				
			

			

				

					Stone的博客
				

				

					05-18
					
					1981
					
				

			

		

		

			
				
【代码】Vue每次请求sessionId都不一样。

			
		

	





	

		

			

				
					
SpringBoot前后端分离跨域导致的Sessionid不一致问题解决办法

				
			

			

				

					nuc2015的博客
				

				

					12-16
					
					4414
					
				

			

		

		

			
				
背景：最近项目进行重构，微服务架构，项目分成多个模块，在用户同步的时候发生了跨域操作。将门户模块的用户信息加密后，通过ajax请求发送给其他模块，例如meta模块，meta模块拿到加密的用户信息后进行解析，然后将用户信息保存到session中。然后发现每次请求，meta模块的sessionid都不同，导致保存在session中的用户信息无效，每次都得重新解析，某些请求是不带用户请求的，所以程序就出...

			
		

	





	

		

			

				
					
项目上线后，前端与后端分别处于不同ip，前端每发一次请求，SessionID都会改变

					
最新发布

				
			

			

				

					weixin_63742275的博客
				

				

					03-10
					
					663
					
				

			

		

		

			
				
原因：之前本地测试，ip相同，端口不同，所以我们配置了跨域，使得请求成功携带了sessionId。但现在直接是ip不同，就导致跨源了，跨源是不允许携带cookie的，所以你即使配置了跨域也是没作用的，cookie带不过去。要注意的是，配置了代理后，你的请求必须发送到前端的启动的ip:prot上，比如我这前端启动的是localhsot:80，那么请求也应该发送到localhsot:80。解决：居然跨源不允许携带cookie，那我们就想办法让他们同源，最简单的就是。

			
		

	





	

		

			

				
					
 vue2 前后端分离项目ajax跨域session问题解决

				
			

			

				

					weixin_34292959的博客
				

				

					04-26
					
					4698
					
				

			

		

		

			
				
最近学习使用vuejs前后端分离，重构一个已有的后台管理系统，遇到了下面这个问题：
实现跨域请求时，每次ajax请求都是新的session，导致无法获取登录信息，所有的请求都被判定为未登陆。
1、 vuejs ajax跨域请求
最开始使用的是vue-resource，结果发现vue2推荐的是axios，于是改成axios；安装axios
...

			
		

	





	

		

			

				
					
新能源汽车推荐系统开发：Springboot+Vue前后端分离

				
			

			

				

					
				

			

		

		

			
				
在介绍基于Springboot的新能源汽车个性化推荐系统之前，需要先明确几个关键的IT技术知识点，这些知识点包括Springboot框架、前后端分离架构、Vue前端框架、Java编程语言、token认证机制以及个性化推荐系统的设计与...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 3

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值