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中，官方已经提供了支持。直接贴代码：

方式一：全局定义

@Configurationpublic class CorsConfig implements WebMvcConfigurer {    private CorsConfiguration buildConfig() {        CorsConfiguration corsConfiguration = new CorsConfiguration();        List
    
      list = new ArrayList<>();        list.add("*");        corsConfiguration.setAllowedOrigins(list);        /*        // 请求常用的三种配置，*代表允许所有，当时你也可以自定义属性        （比如header只能带什么，只能是post方式等等）        */        corsConfiguration.addAllowedOrigin("*");    //支持的源        corsConfiguration.addAllowedHeader("*");    //header限制        corsConfiguration.addAllowedMethod("*");    //支持方法        return corsConfiguration;    }    @Bean    public CorsFilter corsFilter() {        UrlBasedCorsConfigurationSource source            = new UrlBasedCorsConfigurationSource();        source.registerCorsConfiguration("/**", buildConfig());        return new CorsFilter(source);    }}复制代码

方式二：局部定义

@CrossOrigin(origins = "*",allowCredentials="true",allowedHeaders = "",methods = {})复制代码

直接在需要跨域的方法上添加注解，不过我没试过，有兴趣或者有这种方式需求的朋友可以尝试一下。

总结：

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

如果文中有错误，希望大家可以热情指出。