Springboot+vue跨域携带cookie请求

后端用springboot，前端用vue，做完后的分离的时候，前端和后端代码部署的时候肯定是不同的端口，所以不可避免的要跨域访问。

首先说前端的axios请求

axios
    .get('http://localhost:8080/getCodeByEmail/'+this.email)
    .then(response => {

    });

问了从事多年的前端开发人员，他们说这些东西后端一般都配置好了，我查了很多帖子，他们都是这样配置的。

@Configuration
public class CORSConf {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {

                registry.addMapping("/**")
                        .allowedHeaders("*")
                        .allowedMethods("*")
                        .allowedOrigins("*")
                        .allowCredentials(true);
            }
        };
    }
}

用过springboot的人都知道，这就是一个配置类，而且还是一个MVC拦截器，在请求之前拦截并做一些处理。

1. addMapping：允许所以映射
2. allowedHeaders：允许所以请求头
3. allowedMethods:允许所以请求方式，get、post、put、delete
4. allowedOrigins：允许所以域名访问
5. allowCredentials：这是我接下来要说的关键

---

上面的代码就能完成vue的跨域请求，但是这里存在一个问题，每次请求的session不一样。
大家都知道HTTP协议是一个无状态的协议，无法记住上一次请求，所谓的session其实是借助于浏览器的cookie实现的。第一次浏览器与服务器连接的时候，浏览器会在cookie里创建一个sessionId,每次向服务器发送请求的时候服务器根据sessionId来分辨是哪一个浏览器。相当于每个浏览器都有一个身份证。cookie都是有时效的，时间到了就会清除，也就是所谓的session失效。

但是vue的axios请求默认不会携带cookie参数，也就是说服务器无法判断浏览器的身份，每次请求的session都不一样，这样很显然是一个问题。

所以allowCredentials这个方法就是允许携带cookie参数。但是前端必须做一件事，在main.js里写这句话：
axios.defaults.withCredentials = true;
因为我只是在HTML里引入vue插件，所以没有大费周章搞一个vue项目，这样写就OK了