session跨域问题

一、后端：

其中，

启动类：

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);
  }
}

 

二、前端：

其中：

路由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
    }
    
  ]
})

login.vue:

<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>

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

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

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

axios.defaults.withCredentials = true。

解决。