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;
}
目录
2.先在前端创建一个名为request.js的JS文件,写入axios.create({})和响应拦截器
4.在后端springboot项目中的过滤器配置corsFilter,创建一个类MyCorsFilter
5.修改拦截器的重定向为返回数据,让前端的响应拦截器实现跳转到登录页面的效果