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

栏目: Json · 发布时间: 7年前

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

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

jsonp的来历

ajax中的资源访问受到浏览器安全的 ‘同源’限制 ,存在跨域问题。

但是script标签的引入并不具有’同源’限制,不存在跨域问题，利用这个特性进行数据的获取，就是jsonp。

JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

简单的一句话：jsonp是一个协议，由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

jsonp的实现

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

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 src="http://localhost:3000/jsonp?callback=test"></script>
</body>

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

服务器端的关键代码如下：

//解析url
var urlPath = url.parse(req.url).pathname;
console.log(urlPath);
//获取从客户端传递的参数
var qs = querystring.parse(req.url.split('?')[1]);
//约定的url的名称为jsonp
if(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请求的，获取的内容会放在

中，而res.end(data)中的data就会放到script中，浏览器会自动调用其内部代码执行，从而完成回调函数的执行）。

总结

jsonp需要服务器端和客户端配合使用，以script标签无’同源’限制的便利来实现跨域资源的共享。

优点：解决了跨域资源共享

缺点：代码麻烦，需要服务器端和客户端约定好，同时客户端传递数据只能通过url的形式，有长度，安全等限制。

jsonp原理其实很简单，学习难度主要在于与服务器端的配合，这篇文章是我学习了node之后的一些想法，如有问题，还请各位指点！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

High Performance Python

Micha Gorelick、Ian Ozsvald / O'Reilly Media / 2014-9-10 / USD 39.99

If you're an experienced Python programmer, High Performance Python will guide you through the various routes of code optimization. You'll learn how to use smarter algorithms and leverage peripheral t......一起来看看《High Performance Python》这本书的介绍吧!

码农工具

MD5 加密

MD5 加密工具

HEX HSV 转换工具

HEX HSV 互换工具