内容简介：跨域的解决方案（一）：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之后的一些想法，如有问题，还请各位指点！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- iOS 语音播报解决方案(实现支付宝语音收款功能)
- 每日一博 | 使用 Ceph 实现的分布式文件共享解决方案
- 曹工杂谈：分布式事务解决方案之基于本地消息表实现最终一致性
- 『互联网架构』软件架构-解密电商系统-读写分离各种实现优缺点与解决方案（83）
- webgl(three.js)实现室内定位,楼宇bim、实时定位三维可视化解决方案——第五课
- 直接作用于IT运营“管理中枢”的解决方案：提供端到端服务交付和治理能力，助力企业实现“Six More”
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
图片转BASE64编码
在线图片转Base64编码工具
MD5 加密
MD5 加密工具