前后端分离之跨域问题

概念

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域。

解决方案

配置filter过滤器

@WebFilter(filterName = "CorsFilter")
@Configuration
public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response=(HttpServletResponse) servletResponse;
        response.setHeader("Access-Control-Allow-Origin","*");//允许所有IP及端口
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT");//允许接口调用的请求方式POST, GET, PATCH, DELETE, PUT
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        filterChain.doFilter(servletRequest,servletResponse);
    }
}

JSONP

由于了script标签的src属性是没有跨域的限制的，进而可以达到跨域访问的目的。因此JSONP就是利用这一点，动态添加一个< script>标签来实现。

$.ajax({  
    url:"http://127.0.0.1：8080/test/hello",  
    dataType:'jsonp',  
    data:'',  
    jsonp:'callback',  
    success:function(result) {  
            // some code
    }  
});