JSONP-愉快解决跨域接口请求

平时我们在浏览器中请求不同域名的接口数据的时候，通常浏览器会在控制台报一个跨域异常，提示拒绝访问。这是因为受到了同源策略的影响。

同源策略是什么

同源策略是浏览器最核心也是最基本的安全功能，同源指的是两条URL在协议、域名和端口上都是相同的，一旦有其中一个条件是不同的，两者就是不同源。

同源保证了两个同源的URL之间在浏览器上是可以相互访问资源和可以操作DOM的，不同源URL在浏览器上互相访问的时候，浏览器就会判断到不同源，就会出来制裁，拒绝访问。

注意同源策源就只是浏览器行为，两个不同服务器接口互相访问，还是可以正常响应的。

同源策略作用的地方

同源策略主要作用在DOM、Web数据和网络三个层面上。

1. DOM层面：
   同源策略限制了来自不同源的JavaScript脚本对不同源页面的DOM对象读和写操作。
2. Web数据层面：
   同源策源限制了不同源的JavaScript脚本读取对不同源页面的Cookie、LocalStorage等数据。
3. 网络层面：
   同源策略限制了通过XMLHttpRequest、Fetch API等方式将不同源的接口数据获取回来。

回到文章的开头内容，我们在浏览器上请求不同域名的接口数据的时候，就是主要被限制在网络层面的XMLHttpRequest（简称XHR)上，目前所有的现代浏览器都内置了一个XHR对象，这个对象可以在页面加载后从服务器上请求以及获取数据，而不会影响页面的正常行为。XHR在AJAX异步编程上是很关键的功能点。

我们该如何解决跨域问题呢？一般我们都是设置CORS跨域资源共享，来打破同源策略的限制，实现web页面成功访问不同源的接口数据。另外就是使用JSONP的方式来是实现跨域请求。

两者在对比上，CORS支持所有类型的HTTP请求，而JSONP只支持GET请求，显然CORS是更为强大的，不过JSONP的优势在于支持老式浏览器，还可以向不支持CORS的网站请求数据。下面我们将重点研究JSONP。

JSONP是什么

JSONP即JSON with Padding,看上去和JSON很像，其实他就是JSON的一种使用模式，可用于解决现代浏览器的跨域数据访问的问题。非常聪明的程序员发现HTML页面的Script标签是没有跨域限制的，可以从其他不同源的网站获取JSON数据，而这种方式就是JSONP，是一种非官方的跨域方式。

用JSONP获取的数据也并不是JSON对象，而是任意的JavaScript对象，用JavaScript直译器执行而不是用JSON解析器解析。具体理解看以下的JSONP工作原理

JSONP工作原理

通过在页面创建script标签，里面的具体内容是注册一个函数名为随机生成的callback值在客户端，然后将一个callback参数名以及随机生成的值拼接在接口的URL后面，将其最终请求的URL放进src属性,接着插入到head标签里面等待执行。

执行的时候，参数将传送给服务器的接口，接口响应会生成JSON数据，然后以JavaScript 语法的方式，生成一个 function函数，函数名就是入参callback的值。最后将JSON数据以入参的方式，放置到函数中，这样就生成了一段 JavaScript 语法的代码返回给了客户端。

浏览器上的客户端，script标签对返回的函数动态解析，将返回的函数入参数据传入到了预先注册好的callback函数里面，此时就获取到想到获取的数据了，在函数里面做具体的操作了。

JSONP具体实现

JSONP在前端目前的实现方式有两种，一种是通过纯js代码实现，另一种是JQuery实现，下面演示JQuery版本。

前端代码：

$.ajax({
    type: "get",
    async: false,
    url: "http://xxx.com/demo",
    dataType: "jsonp",
    jsonp: "callback", //默认的请求参数名
    jsonpCallback:"abc", //命令jsonp回调函数名称，也可写成问号让名称随机生成
    success: function(json){
    alert('您看到的数据为： ' + json);
    },
    error: function(){
    alert('请求出错');
    }
});

服务器Java代码：

@GetMapping("/demo")
public String getData(String callback){    
    if( callback == null ){        
        throw new RuntimeException("callback值不能为空");    
    }    
    return new StringBuilder(callback).append("(").append("关注微信公众号：红橙呀").append(")").toString();
}

通过JSONP的方式，我们下次遇到跨域问题，也可以使用它实现愉快的跨域请求，早点下班了~

更多Java后端开发干货，可以关注公众号「 红橙呀 」。