SpringMVC、 springBoot、zuul跨域问题解决

SpringMVC跨域问题

• 方法一：加入跨域处理配置

@Configuration
public class WebConfig implements WebMvcConfigurer {
	 @Bean
	 public CorsFilter corsFilter() {
	     final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
	     final CorsConfiguration config = new CorsConfiguration();
	     config.setAllowCredentials(true); 
	     config.addAllowedOrigin("*");
	     config.addAllowedHeader("*");
	     config.setMaxAge(3600L);
	     config.addAllowedMethod("*");
	     source.registerCorsConfiguration("/**", config);
	     return new CorsFilter(source);
	 }
}

• 方法二：继承Filter类

@Component  
public class CorsFilter implements Filter {  
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {  
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;  
        response.setHeader("Access-Control-Allow-Origin", "*");  
        response.setHeader("Access-Control-Allow-Methods", "*");  
        response.setHeader("Access-Control-Max-Age", "3600");  
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with"); 
        chain.doFilter(req, res);  
    }  
    @Override
    public void init(FilterConfig filterConfig) {}  

    @Override
    public void destroy() {}  
}  

zuul跨域问题

• 方法一 继承Filter类

@Component  
public class CorsFilter implements Filter {  
   @Override
   public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {  
       HttpServletRequest request = (HttpServletRequest) req;
       HttpServletResponse response = (HttpServletResponse) res;  
       response.setHeader("Access-Control-Allow-Origin", "*");  
       response.setHeader("Access-Control-Allow-Methods", "*");  
       response.setHeader("Access-Control-Max-Age", "3600");  
       response.setHeader("Access-Control-Allow-Headers", "x-requested-with"); 
       chain.doFilter(req, res);  
   }  
   @Override
   public void init(FilterConfig filterConfig) {}  

   @Override
   public void destroy() {}  
}  

• 方法二：配置类

@Configuration
public class CorsConfig {

    @Bean
    public FilterRegistrationBean corsFilter() {
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.setMaxAge(3600L);
        source.registerCorsConfiguration("/**", corsConfiguration);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        bean.setOrder(Ordered.HIGHEST_PRECEDENCE);
        return bean;
    }
}

• 方法三：继承ZuulFilter

public class MyFilter extends ZuulFilter {
	/**
     * pre：可以在请求被路由之前调用
     * routing：在路由请求时候被调用
     * post：在routing和error过滤器之后被调用
     * error：处理请求时发生错误时被调用
     */
    public String filterType() {
        FilterConstants.PRE_TYPE;
    }
	
    public int filterOrder() {
        return Ordered.HIGHEST_PRECEDENCE;
    }
	
    public boolean shouldFilter() {
        return true;
    }
	
    public Object run() {
        RequestContext ctx = RequestContext.getCurrentContext(); 
        HttpServletResponse response = ctx.getResponse();
        response.setHeader("Access-Control-Allow-Origin", "*");  
        response.setHeader("Access-Control-Allow-Methods", "*");  
        response.setHeader("Access-Control-Max-Age", "3600");  
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");   
        return null;
    }
}

注意
zuul和微服务跨域互斥需要添加下面的配置

zuul:
  sensitive-headers: Access-Control-Allow-Origin
  ignored-headers: Access-Control-Allow-Credentials,Access-Control-Allow-Origin

js跨域处理

详细了解戳这

• jsonp

原理：通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入（把参数当js使用）

<script type="text/javascript">
   function function(jsondata){
       //处理获得的json数据
   }
</script>
<script src="http://example.com/data?callback=function"></script>

ajax处理

$.ajax({
   	type : "GET",
   	async : false,
   	url : "http://example.com/data",
   	dataType : "jsonp",//数据类型为jsonp  
   	jsonp : "jsonpCallback",//服务端用于接收callback调用的function名的参数
   	success : function(data) {
   	},
   	error : function() {
   	}
});

注意:

• jsonp的请求类型是script，而非xhr，这样浏览器就不会做安全校验；
• sonp的返回类型是js，而非json；
• jsonp请求携带一个前后台约定的参数（eg：callback），便于让后台识别是jsonp请求，后台则返回js数据而非json数据

• ajax 添加凭据

$.ajax({
    xhrFields: {
       withCredentials: true
    },
   	type : "GET",
   	async : false,
   	url : "http://example.com/data",
   	dataType : " json",
   	success : function(data) {
   	},
   	error : function() {
   	}
});

注意: 默认情况下，跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等)。通过将withCredentials属性设置为true，可以指定某个请求应该发送凭据