后端用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拦截器,在请求之前拦截并做一些处理。
- addMapping:允许所以映射
- allowedHeaders:允许所以请求头
- allowedMethods:允许所以请求方式,get、post、put、delete
- allowedOrigins:允许所以域名访问
- 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了