Spring Cloud项目前后端分离跨域的操作

跨域问题，其实百度上面有一堆的解决方案

针对普通的情况其实百度上面的方案都是可行的。

我这里主要介绍2种情况。

当然我这里的配置都是基于网关的，而不是基于服务的。

1、没有增加权限验证。

2、增加了spring security的权限验证（我这里是基于keyCloak），增加了Authorization

首先我们介绍第一种情况的解决方法，这个很简单，只需要在启动类里面配置过滤器就可以解决。

@Bean
   public CorsFilter corsFilter() {
       //1.添加CORS配置信息
       CorsConfiguration config = new CorsConfiguration();
         //放行哪些原始域
         config.addAllowedOrigin("*");
         //是否发送Cookie信息
         config.setAllowCredentials(true);
         //放行哪些原始域(请求方式)
         config.addAllowedMethod("*");
         //放行哪些原始域(头部信息)
         config.addAllowedHeader("*");
         //暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
         config.addExposedHeader("*");

//2.添加映射路径
       UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
       configSource.registerCorsConfiguration("/**", config);

//3.返回新的CorsFilter.
       return new CorsFilter(configSource);
   }

我遇到情况就是第二种了，这种情况上面的方式基本没有作用，我这里使用的是keyCloak做的权限验证。

首先增加过滤器配置：

@Component
public class CorsControllerFilter implements Filter{
@Override
public void destroy() {
// TODO Auto-generated method stub

}

@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
// TODO Auto-generated method stub
HttpServletResponse res = (HttpServletResponse) response;
res.setContentType("text/html;charset=UTF-8");
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE ,PUT");
res.setHeader("Access-Control-Max-Age", "3600");
res.setHeader("Access-Control-Allow-Headers", "*");
res.setHeader("Access-Control-Allow-Credentials", "true");
res.setHeader("XDomainRequestAllowed", "1");
chain.doFilter(request, response);
}

@Override
public void init(FilterConfig arg0) throws ServletException {
// TODO Auto-generated method stub
}
}

在启动类中增加配置

   @Bean
public FilterRegistrationBean filterRegistrationBean() {
    FilterRegistrationBean registrationBean = new FilterRegistrationBean();
    CorsControllerFilter corsControllerFilter = new CorsControllerFilter();
    registrationBean.setFilter(corsControllerFilter);
    return registrationBean;
}

但是针对某些请求，他会先请求OPTIONS请求，造成权限验证失败。所以增加 * 配置，对所有的OPTIONS的请求直接放行，返回200的状态。

public class OptionsInterceptor implements HandlerInterceptor {

@Override
public void afterCompletion(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2, Exception arg3)
throws Exception {
// TODO Auto-generated method stub
}

@Override
public void postHandle(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2, ModelAndView arg3)
throws Exception {
// TODO Auto-generated method stub
}

@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
// TODO Auto-generated method stub
       if(request.getMethod().equals("OPTIONS")){
           response.setStatus(HttpServletResponse.SC_OK);
           return false;
       }
       return true;
}
}

配置web配置文件，加载 * 。

@Configuration
public class WebMvcConfiguration extends WebMvcConfigurationSupport{
@Override
   public void addInterceptors(InterceptorRegistry registry) {
       registry.addInterceptor(new OptionsInterceptor()).addPathPatterns("/**");
}
}

本来以为这样配置了应该是可以了，但是在请求的时候OPTIONS的请求居然还是报跨域的问题，增加 * 允许跨域配置

public class CrossInterceptor implements HandlerInterceptor{
@Override
public void afterCompletion(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2, Exception arg3)
  throws Exception {
 // TODO Auto-generated method stub
}

@Override
public void postHandle(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2, ModelAndView arg3)
  throws Exception {
 // TODO Auto-generated method stub
}

@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
 // TODO Auto-generated method stub
       response.setHeader("Access-Control-Allow-Origin", "*");
       response.setHeader("Access-Control-Allow-Credentials", "true");
       response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT, HEAD");
       response.setHeader("Access-Control-Allow-Headers", "*");
       response.setHeader("Access-Control-Max-Age", "3600");
       return true;
}
}

在WebMvcConfiguration里面增加配置，注意要写在OptionsInterceptor的前面

registry.addInterceptor(new CrossInterceptor()).addPathPatterns("/**");

继续测试，跨域问题解决。对于原理其实我也不太清楚，欢迎各位沟通交流。

来源：https://blog.csdn.net/zhuwei_clark/article/details/83413763