后端用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了
截图

Logo

前往低代码交流专区

更多推荐