解决前端跨域问题

本身搞了一个先后端分离的项目，前端用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 }

再次访问就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