1.跨域问题需要前端和后端一起解决

我选择在后端springboot的过滤器中配置corsFilter类，在前端使用axios.create({})解决跨域问题

响应拦截器解决后端拦截器无法重定向或者转发到前端的问题

2.先在前端创建一个名为request.js的JS文件，写入axios.create({})和响应拦截器

(function (win) {
    // 创建axios实例
    const service = axios.create({
        // axios中请求配置有baseURL选项，表示请求URL公共部分（地址为后端的访问地址）
        baseURL: "http://8.130.17.95:4000",
        // 超时
        timeout: 10000,
        //和后端corsFilter方法中的setAllowCredentials对应
        //为前后端都为true可以解决session不一致问题
        withCredentials: true,

    });
    //响应拦截器（拦截拦截器返回的内容进行无用户跳转登录页面）
    service.interceptors.response.use(response => {
        //拦截到后端拦截器返回的内容就进行页面跳转
        if(response.data.code==2){
            window.requestAnimationFrame(()=>{
                window.location.href= '/login.html';
            });
        }else{ 
           //axios异步请求中返回的值res;如果返回response.data,axios异步请求的返回逻辑也需要改变
            return response;     
        }
    },error => {
        return Promise.reject(error);
    })
    win.$axios = service      //设置全局变量（axios异步请求中使用$axios）
})(window);

3.当前这个文件必须引入到HTML文件中

4.在后端springboot项目中的过滤器配置corsFilter，创建一个类MyCorsFilter

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class MyCorsFilter {
    @Bean
    public CorsFilter corsFilter() {

        CorsConfiguration config = new CorsConfiguration();
        //和前端的axios.create中withCredentials对应，共同为true可解决session不一致的问题
        config.setAllowCredentials(true);       
        // 设置访问源地址（前端的访问地址），需要注意如果前端是80端口就在这里不写80，不然跨域失败
        config.addAllowedOriginPattern("http://8.130.17.95");     
        // 设置访问源请求头
        config.addAllowedHeader("*");
        // 设置访问源请求方法
        config.addAllowedMethod("*");
        // 有效期 1800秒
        config.setMaxAge(1800L);
        // 添加映射路径，拦截一切请求
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        // 返回新的CorsFilter
        return new CorsFilter(source);
    }
}

5.修改拦截器的重定向为返回数据，让前端的响应拦截器实现跳转到登录页面的效果

if(result==null){
    System.out.println("你执行？。。。。");
    response.getWriter().println(JSONUtil.toJsonStr(new JsonResult(2,"已拦截")));
    return false;
}

目录

1.跨域问题需要前端和后端一起解决

2.先在前端创建一个名为request.js的JS文件，写入axios.create({})和响应拦截器

3.当前这个文件必须引入到HTML文件中

4.在后端springboot项目中的过滤器配置corsFilter，创建一个类MyCorsFilter

5.修改拦截器的重定向为返回数据，让前端的响应拦截器实现跳转到登录页面的效果

---