首页手记跨域的解决方案（一）：jsonp及其实现

跨域的解决方案（一）：jsonp及其实现

标签：

JavaScript

作者博客: martin

最近遇到了跨域问题，有很多种解决方案，本文主要对其中的jsonp进行演示，本文使用node编写服务器端代码进行测试。

jsonp的来历

ajax中的资源访问受到浏览器安全的'同源'限制,存在跨域问题。
但是script标签的引入并不具有'同源'限制,不存在跨域问题，利用这个特性进行数据的获取，就是jsonp。
JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
简单的一句话：jsonp是一个协议，由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

jsonp的实现

从上文可知，jsonp的实现需要客户端代码和服务器端代码共同努力。整体的思路如下图：

Paste_Image.png

script标签不受跨域资源请求的影响，可以通过增加callback参数将回调函数传递，与服务器端配合从而在资源加载之后执行该回调函数,客户端关键部分写法如下：

<!DOCTYPE html><body>
    <h1>测试jsonp</h1>
    <p>用node搭建能够解析jsonp请求的服务器，前端通过script发送jsonp请求，通过回调处理服务器返回的数据</p>
    <script>
        function test(data){
            alert(data.name);
        };    </script>
    <!-- 将test作为callback参数传递 -->
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://localhost:3000/jsonp?callback=test"></script></body>

在服务器端，需要对script的src进行url解析，将data作为参数放入回调函数中，最后通过res.end(callback(data))中将要执行的函数放入客户端的script中，在客户端对该函数进行执行。
服务器端的关键代码如下：

//解析urlvar urlPath = url.parse(req.url).pathname;console.log(urlPath);//获取从客户端传递的参数var qs = querystring.parse(req.url.split('?')[1]);//约定的url的名称为jsonpif(urlPath === '/jsonp' && qs.callback){
    res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'});    var data = {        "name": "Monkey"
    };
    data = JSON.stringify(data);    var callback = qs.callback+'('+data+');';    //在end中返回callback(data)，写入script中，进而客户端进行该函数的执行
    res.end(callback);
}

仓库在这里(仓库中的代码相对复杂一点，不过更加便于演示，具体看仓库中的说明)这里要说明的一点就是，url中"?callback=test"的形式其实是不必要的，只需要客户端和服务器端协商一致即可。（这里我在写的时候，其实有一点疑惑：就是为什么把callback(data)传递回去就会在客户端执行？其实是因为客户端是通过script请求的，获取的内容会放在<script></script>中，而res.end(data)中的data就会放到script中，浏览器会自动调用其内部代码执行，从而完成回调函数的执行）。

总结

jsonp需要服务器端和客户端配合使用，以script标签无'同源'限制的便利来实现跨域资源的共享。
优点：解决了跨域资源共享
缺点：代码麻烦，需要服务器端和客户端约定好，同时客户端传递数据只能通过url的形式，有长度，安全等限制。
jsonp原理其实很简单，学习难度主要在于与服务器端的配合，这篇文章是我学习了node之后的一些想法，如有问题，还请各位指点！