一看就会的JSONP前后端实现

JSONP可用于解决主流浏览器的跨域数据访问的问题。

一、产生原因

为了浏览器安全产生了同源策略(域名，协议和端口都相同)，违背了同源策略就会产生跨域，跨域了ajax就不能从服务器拉取资源了。

这个时候，就可以用JSONP了。

二、实现原理

JSONP的实现需要客户端和服务端共同完成。

1、客户端

<script>
    // 定义全局变量
    var cbData = {}
    // 定义全局函数
    var callbackFun = res => {
        cbData = res;
    }
</script>
<script src="http://127.0.0.1:1337/cb?callback=callbackFun"></script>

在JSOP开始之前先定义一个全局的回调函数，用来接受后端返回的可执行函数callbackFun，再通过不受同源策略限制的script去拉取资源。

2、服务端

var http = require('http');
var url = require('url');

http.createServer(function (req, res) {
    // 将请求req中的url进行解析
    var urlObj = url.parse(req.url, true)
    res.writeHead(200, {
        'Content-Type': 'text/plain'
    });
    // 返回callback对应的方法名和通过JSON.stringify处理过的数据拼接而成的字符串
    res.end(`${urlObj.query.callback}(${JSON.stringify({name: 'qb',age: 30})})`)

}).listen(1337, '127.0.0.1');

当服务端接收到请求时，通过url提供的方法.parse去解析路径信息生成路径对象，再用和客户端同样名称的函数包裹资源，包裹结果为callbackFun({"name":"qb","age":30})，将其通过res.end的方式返回给浏览器。

当浏览器接受到服务器端返回的回调函数时会在浏览器环境寻找callbackFun函数，并执行。

至此，完整的JSONP请求就完成啦。

三、特点

根据JSONP的实现流程可以看出，它主要的特点就是请求方式是get的。

四、限制

这里是不是觉得JSONP好牛逼，ajax跨域拿不到的数据，它都能拿到。

其实，CSP安全策略是可以限制JSONP的，毕竟JSONP是通过script的方式实现的，CSP就是用来限制script加载资源的。