深入分析JSONP跨域的原理

下面为你详细讲解“深入分析JSONP跨域的原理”的完整攻略。

一、JSONP跨域介绍

JSONP, 即 JSON with Padding，JSON 填充式，一般用于解决独立域名下ajax无法访问的问题，是一种跨域的解决方案。JSONP 实现的基本思路是利用 script 标签可以跨域请求资源的特性，来达到与第三方通信的目的。

在前端页面中，我们可以通过script标签请求一个跨域的资源，服务器将数据以JavaScript对象的形式返回，然后前端使用回调函数对返回的数据进行处理。这种方案用在跨域嵌入广告、第三方登录（如QQ、微信等）、使用第三方的API等常见场景中。

二、JSONP跨域的原理

当使用 script 标签来引用一个跨域资源时，浏览器就会像普通情况一样发送请求，但是服务器端需要做出特殊的响应。

JSONP的原理非常简单，就是将请求信息放在函数调用参数中。具体实现过程如下：

• 声明一个函数，函数名作为查询参数发送到服务器端
• 服务器端解析请求参数，并且将需要返回的数据拼接在函数调用中
• 服务器端将拼接好的内容返回给前端
• 前端成功接收到数据后，执行该函数进行解析

三、JSONP跨域的示例

1. 前后端分离项目

前端代码（请求movie.json）：

function handleData(data) {
  console.log(data);
}

var script = document.createElement('script');
script.type = "text/javascript";
script.src = "http://localhost:3000/movie.json?callback=handleData";
document.body.appendChild(script);

后端代码：

// 通过url获取jsonp参数值，假设传入的jsonp函数名为handleData
var jsonpCallback = req.query.callback;
var data = {
  title: '肖申克的救赎',
  duration: 120
};
// 返回数据，注意客户端传来的callback函数用括号包裹
res.send(jsonpCallback + '(' + JSON.stringify(data) + ')');

2. 前后端不分离项目

前端代码：

function handleData(data) {
  console.log(data);
}

var script = document.createElement('script');
script.type = "text/javascript";
script.src = "http://localhost:3000/movie?callback=handleData";
document.body.appendChild(script);

后端代码：

// 通过url获取jsonp参数值，假设传入的jsonp函数名为handleData
var jsonpCallback = req.query.callback;
var data = {
  title: '肖申克的救赎',
  duration: 120
};
// 返回数据，注意客户端传来的callback函数用括号包裹
res.render('movie', {
  data: JSON.stringify(data),
  callback: jsonpCallback
});

模板渲染movie.ejs：

<!-- 注意此处需要将回调函数名和返回数据以script标签的形式返回给前端 -->
<script>
  <%= callback %>(<%= data %>)
</script>

四、JSONP跨域的优缺点

优点：

• 兼容性好，可以使用在各种不同的浏览器上
• 具有灵活性，因为可以指定回调函数名，方便前端使用

缺点：

• 安全性问题，因为JSONP中的请求方式只支持get方法，所以其数据暴露在URL中，容易被拦截截取或篡改
• 对服务器不太友好。因为每次请求都会调用回调函数，需要消耗一部分性能。此外，如果接口需要权限认证，JSONP 则会变得繁琐。