springboot(八)spring boot 前后端分离，解决ajax跨域问题

使用spring boot 开发的项目，要做到前端和后台分离，前端访问都是以ajax方式。这里涉及到了跨域问题，以下是解决方案。

后端，定义跨域过滤器，如下：

@Bean
    public MyCrosFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 4
        return new MyCrosFilter(source);
    }
    
    @Bean
    @Order(Ordered.HIGHEST_PRECEDENCE)
    public FilterRegistrationBean crosFilterRegistrationBean(){
    if(log.isInfoEnabled()){
    log.info("-----注册跨域过滤器-------");
    }
    FilterRegistrationBean frb = new FilterRegistrationBean();
    frb.setOrder(Ordered.HIGHEST_PRECEDENCE);
    frb.setFilter(corsFilter());
   
    frb.addUrlPatterns("/*");
    frb.setName("crosFilter");
    return frb;
    }
 
   MyCrosFilter 代码如下:
 
public class MyCrosFilter extends OncePerRequestFilter{
 
 
 
 
 
private final CorsConfigurationSource configSource;
 
 
private CorsProcessor processor = new DefaultCorsProcessor();
 
 
 
 
/**
* Constructor accepting a {@link CorsConfigurationSource} used by the filter
* to find the {@link CorsConfiguration} to use for each incoming request.
* @see UrlBasedCorsConfigurationSource
*/
public MyCrosFilter(CorsConfigurationSource configSource) {
Assert.notNull(configSource, "CorsConfigurationSource must not be null");
this.configSource = configSource;
}
 
 
 
 
/**
* Configure a custom {@link CorsProcessor} to use to apply the matched
* {@link CorsConfiguration} for a request.
* 
By default {@link DefaultCorsProcessor} is used.
*/
public void setCorsProcessor(CorsProcessor processor) {
Assert.notNull(processor, "CorsProcessor must not be null");
this.processor = processor;
}
 
 
 
 
@Override
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response,
FilterChain filterChain) throws ServletException, IOException {
 
 
if (CorsUtils.isCorsRequest(request)) {
//System.out.println("ORGIN----"+request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
//response.setHeader("Access-Control-Allow-Origin", "http://172.16.10.156:8088");
response.setHeader("Access-Control-Allow-Credentials", "true");
CorsConfiguration corsConfiguration = this.configSource.getCorsConfiguration(request);
if (corsConfiguration != null) {
boolean isValid = this.processor.processRequest(corsConfiguration, request, response);
if (!isValid || CorsUtils.isPreFlightRequest(request)) {
return;
}
}
}
 
 
filterChain.doFilter(request, response);
}
 
 
}

其中response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));

response.setHeader("Access-Control-Allow-Credentials", "true");为重点

前台：

发送ajax例子:

function aaa(){
 
$.ajax({
 type: 'GET',
 url: "http://172.16.10.156:8088/base/user/query",
 
type : 'POST',
//dataType: 'jsonp',
 
 
xhrFields: {
withCredentials: true
},
crossDomain: true,
 
 
 success: function(data){
 console.log(data);
 }
 
});
}

其中xhrFields: {
withCredentials: true
},
crossDomain: true,

为重点