SpringBoot跨域 Jsonp和Cors

有一次我的项目中采用了前后端分离的模式，引起了跨域问题，本文将介绍我所采用的跨域解决方法。

首先要了解产生跨域的本质，也就是同源策略的限制，源是指域名、端口号、协议，有一者不相同将被浏览器拒绝接受响应信息，（请求可以发送出去，但是浏览器不接受响应）。

解决方法：

1. jsonp

jsonp的原理的 src="" 属性不受同源策略的限制，动态创建一个callback回调函数，服务器调用回调函数把数据放进去，具体的细节打算以后做一个专门讲解。

这里给一个模版:

        $.ajax({
         type: "get",               //jsonp只能使用get
         async: false,
         url: ""
         dataType: "jsonp",
         jsonp: "callback",        
         jsonpCallback:"message",       //注意这里给回调函数起的名字
             success: function(json){
             
            }
        })

如果这里你的回调函数起名为message，那么你在后端返回json的时候，也要注意在最外面包一层message{}。

这里jsonp的缺点也可以明显的看出，只支持get请求，原因就是因为通过src=“”发送请求，所以可以知道是url传参。

那么jsonp的好处是什么呢，兼容性，几乎所有浏览器都支持（包括一些版本比较老的），不需要XMLHttpRequest或ActiveX的支持。

2. cors

又称跨域访问，浏览器将cors请求分为简单请求和非简单请求，因为本文主要讲解具体的方法，所以关于细节部分有兴趣可以去看其他博客或者我以后再做一篇具体的讲解（和jsonp一起）。在springboot中，官方已经提供了支持。直接贴代码：

方式一：全局定义

注意@Order这个注解，不加的话很大可能导致配置失效

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods",
                "ACL, CANCELUPLOAD, CHECKIN, CHECKOUT, COPY, DELETE, GET, HEAD, LOCK, MKCALENDAR, MKCOL, MOVE, OPTIONS, POST, PROPFIND, PROPPATCH, PUT, REPORT, SEARCH, UNCHECKOUT, UNLOCK, UPDATE, VERSION-CONTROL");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers",
                "Origin, X-Requested-With, Content-Type, Accept, x-userId");

        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            chain.doFilter(req, res);
        }
    }
}

方式二：局部定义

    @CrossOrigin(origins = "*",allowCredentials="true",allowedHeaders = "",methods = {})

直接在需要跨域的方法上添加注解,十分方便。也可以在类上使用该注解.

总结：

个人推荐使用cors，如果因为兼容性问题不得不使用jsonp那也没办法。然后如果是前后端分离的模式下，对于用户权限验证这一块也是一个需要注意点，如果使用cookie-session，跨域会导致后台获取不到session，我们可以利用token的方法来解决这个问题，我打算以后介绍一下jwt（Json web Token）来实现用户认证。