session跨域问题

谁践踏了优雅 2022-05-18 09:06 255阅读 0赞

一、后端：

![70][]

其中，

启动类：

package com.demo;
    
    import org.mybatis.spring.annotation.MapperScan;
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    import org.springframework.context.annotation.Bean;
    import org.springframework.web.cors.CorsConfiguration;
    import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
    import org.springframework.web.filter.CorsFilter;
    
     
    @SpringBootApplication
    @MapperScan("com.demo.dao")
    public class Start {
    	public static void main(String[] args) {
    		SpringApplication.run(Start.class, args);
    	}
    	
    }

UserController:

package com.demo.controller;
    
    import java.util.Date;
    import java.util.List;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpSession;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.CrossOrigin;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.bind.annotation.RestController;
    
    import com.demo.module.Message;
    import com.demo.module.User;
    import com.demo.service.UserService;
    
    @RestController
    @RequestMapping("/user")
    public class UserController {
    
    	@Autowired
    	private UserService userService;
    
    	@RequestMapping("/select")
    	public List<User> select() {
    		return userService.selectAll();
    	}
    
    	@RequestMapping("/login")
    	public Message login(String name, String pwd,HttpServletRequest req) {
    		User user = userService.select(name, pwd);
    		Message message = new Message();
    		if (user != null) {
    			message.setCode(200);
    			message.setRes(true);
    			message.setMsg("登录成功");
    			HttpSession session = req.getSession();
    			session.setAttribute("user", user);
    		} else {
    			message.setCode(500);
    			message.setRes(false);
    			message.setMsg("登录失败");
    		}
    		return message;
    	}
    	
    	@RequestMapping("/main")
    	public User main(HttpServletRequest req){
    		
    		HttpSession session = req.getSession();
    		System.out.println("请求"+session.getId());
    		User user = (User) session.getAttribute("user");
    		System.out.println("当前登录用户为"+user);
    		return user;
    	}
    
    }

跨域配置WebMvcConfig ：

package com.demo.filter;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
    
    @Configuration
    public class WebMvcConfig extends WebMvcConfigurerAdapter {
    
      @Override
      public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedHeaders("*")
          .allowedMethods("*")
          .allowedOrigins("*")
          .allowCredentials(true);
      }
    }

二、前端：

![70 1][]

其中：

路由index.js:

import Vue from 'vue'
    import Router from 'vue-router'
    import Index from '@/components/index'
    import Main from '@/components/main'
    import Login from '@/components/login'
    import LoginMain from '@/components/loginmain'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        
        {
          path: '/index',
          name: 'index',
          component: Index
        },
        {
          path: '/main',
          name: 'main',
          component: Main
        },
        {
          path: '/',
          name: 'login',
          component: Login
        },
        {
          path: '/loginmain',
          name: 'loginmain',
          component: LoginMain
        }
        
      ]
    })

<template>
    	<el-form label-width="500px" class="demo-ruleForm loginform" align="center">
    		<el-form-item label="用户名">
    			<el-input v-model="name"></el-input>
    		</el-form-item>
     
    		<el-form-item label="密    码" prop="pass">
    			<el-input v-model="pwd" type="password" auto-complete="off"></el-input>
    		</el-form-item>
     
    		<el-form-item size="large">
    			<el-button type="primary" @click="login()">登录</el-button>
    			<el-button>取消</el-button>
    		</el-form-item>
    	</el-form>
    </template>
    <script>
    	import axios from 'axios'
    	export default{
    		data() {
    			return {
    				name: "",
    				pwd: ""
    			}
    		},
    		methods:{
    			login(){
    				var dt = "&&name="+this.name+"&&pwd="+this.pwd;
    				axios.post('http://localhost:8082/user/login',dt).then((response)=>{
    			       if(response.data.res){
    			       	this.$router.push('/LoginMain');
    			       }else{
    			       	alert(response.data.msg);
    			       }
    				})
    			}
    		}
    	}
    </script>
    
    <style>
    </style>

loginmain.vue:

<template>
    	<div>main</div>
    </template>
    
    <script>
    	import axios from 'axios'
    	 export default {
    		data() {
    			return {
    				name: "", pwd: ""
    			}
    		}
    		,
    		created() {
    			this.fetchData()
    		}
    		,
    		methods: {
    			fetchData() {
    				
    				axios.post('http://localhost:8082/user/main').then((response)=> {
    					console.log(response);
    					var user = response.data;
    					alert(user.id);
    				}
    				)
    			}
    		}
    	}
    </script>
    
    <style>
    	
    </style>

登录成功后多次请求后台打印：

![70 2][]

每次sessionId都不一样，说明session失效了。

解决方法：后端跨域已经解决，前端VUE在引入axios的地方加上

axios.defaults.withCredentials = true。

![70 3][]

解决。

[70]: /images/20220518/1def2f04f4ae4264b61ef5466f93712f.png
[70 1]: /images/20220518/be0f4e8063c84e5cadfa0124ba86e345.png
[70 2]: /images/20220518/55331e47781a465aa50d7ca242aac5e8.png
[70 3]: /images/20220518/5cf882740f1f4c94b00ac05818762ef5.png