解决前端跨域问题

自己搞了一个前后端分离的项目，前端用ajax请求，json数据交互。但是前端访问后台接口出现了一个坑

“jquery-2.1.4.min.js:4 Access to XMLHttpRequest at 'localhost:8080/login?password=123456' from origin 'http://localhost:63342' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.”

一直报这个错，了解是跨域问题，因为前后端分离所以前端后端资源不在一起，由于同源策略所以报这个错误。

解决的话直接在后台写一个跨域配置过滤器

 1 @Component
 2 public class CorsFilter implements Filter {
 3 
 4     @Override
 5     public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
 6         HttpServletRequest request = (HttpServletRequest) servletRequest;
 7         HttpServletResponse response = (HttpServletResponse) servletResponse;
 8         response.setHeader("Access-Control-Allow-Origin", "*");
 9         response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT, GET");
10         response.setHeader("Access-Control-Max-Age", "3600");
11         response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
12         filterChain.doFilter(servletRequest, servletResponse);
13     }
14 }


或者

@Configuration
public class CorsConfig  {

    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); //允许任何域名
        corsConfiguration.addAllowedHeader("*"); //允许任何头
        corsConfiguration.addAllowedMethod("*"); //允许任何方法
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); //注册
        return new CorsFilter(source);
    }


}

再次访问就OK了！

 

“最重要的就是Access-Control-Allow-Origin，标识允许哪个域的请求。当然，如果服务器不通过，根本没有这个字段，接着触发XHR的onerror，再接着你就看到浏览器的提示xxx的服务器没有响应Access-Control-Allow-Origin字段”

//指定允许其他域名访问
'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法（*，指定域，动态设置），3是因为*不允许携带认证头和cookies
//是否允许后续请求携带认证信息（cookies）,该值只能是true,否则不返回
'Access-Control-Allow-Credentials:true'

后来在简书上看到的一篇文章才发现原来是这里的问题！！

 

前端当时也找到了一个解决办法

 $.ajax({
                type:"GET",
                url:"http://localhost:8080/xxx",
		data:{},
                dataType: 'jsonp',
                crossDomain: true
            })
		}

就是dataType设置为jsonp，crossDomain设置为true