SpringBoot + VUE前后端分离跨域问题解决办法
由于最近刚好做了前后端分离项目,跨域问题困扰了好久,网上也没有找到很全面很详细的解决方法,所以在这里整理一下最近做的项目遇到跨域问题及解决思路。
这里贴一个慕课网上的免费课程:https://www.imooc.com/learn/947
里面详细的讲了跨域的原因和解决思路
VUE
需要提交cookie的跨域请求,axios默认是禁止携带cookie的,需要添加以下两个参数,即可发送带cookie的请求
axios.defaults.crossDomain = true;
axios.defaults.withCredentials = true;
SpringBoot
CORS框架解决跨域
常用的跨域问题解决方法,具体实现如下:
@Configuration
public class CorsConfig {
@Bean
public CorsFilter corsFilter(){
final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
final CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);//允许携带cookie的请求
config.setAllowedOrigins(Arrays.asList("*"));//*表示所有域访问
config.setAllowedHeaders(Arrays.asList("*"));//*表示允许所有请求头
config.setAllowedMethods(Arrays.asList("POST", "GET", "PUT", "OPTIONS", "DELETE"));//允许通过的方法
config.setMaxAge(1800l);//设置免预检时间,单位秒
source.registerCorsConfiguration("/**",config);
return new CorsFilter(source);
}
}
如果拦截器获根据session信息来判断用户是否登陆,需要注意一点,复杂请求每次会先发送OPTIONS请求,而OPTIONS请求每次携带的session不一样,需要在拦截器里放行所有的OPTIONS请求:
String method = request.getMethod();
if("OPTIONS".equals(method)){
filterChain.doFilter(servletRequest,servletResponse);
return ;
}
自定义filter解决跨域
public class MyFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletResponse httpServletResponse = (HttpServletResponse) servletResponse;
HttpServletRequest httpServletRequest = (HttpServletRequest)servletRequest;
String origin = httpServletRequest.getHeader("Origin");
if(!StringUtils.isEmpty(origin)){//如果域名不为空,则获取请求的域名
httpServletResponse.setHeader("Access-Control-Allow-Origin", origin);//允许访问的域名
}//这里有一个坑,前端发送携带 cookie的请求时,origin不允许为“*”,所以这里做了这两部操作,效果等同于“*”
httpServletResponse.setHeader("Access-Control-Allow-Methods", "*");
httpServletResponse.setHeader("Access-Control-Max-Age", "3600");
httpServletResponse.setHeader("Access-Control-Allow-Headers",
"Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");// 允许cookie
filterChain.doFilter(servletRequest, servletResponse);
}
@Override
public void destroy() {
}
}
希望能帮助大家解决前后端分离时遇到的跨域问题