JSONP 的工作原理是什么？
36 个回答
很简单，就是利用<script>标签没有跨域限制的“漏洞”（历史遗迹啊）来达到与第三方通讯的目的。当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址，形如：
<script src="http://www.example.net/api?param1=1¶m2=2"></script>
并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。
第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），形如：
callback({"name":"hax","gender":"Male"})
这样浏览器会调用callback函数，并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。
补充：“历史遗迹”的意思就是，如果在今天重新设计的话，也许就不会允许这样简单的跨域了嘿，比如可能像XHR一样按照CORS规范要求服务器发送特定的http头。
JSONP不是一门语言，也并不是什么特别开发的技术，它更像是一个BUG，一个开发者找出来可以用来作为跨域传输数据的”漏洞”。虽然名字中带的是JSON，但其实严格来说，传输的javascript代码，只不过代码内容基本都是json而已。
JSONP的原理非常简单，就是HTML标签中，很多带src属性的标签都可以跨域请求内容，比如我们熟悉的img图片标签。同理，script标签也可以，可以利用script标签来执行跨域的javascript代码。通过这些代码，我们就能实现前端跨域请求数据。
最关键的方法是这样的：前端网页中写一个fun1，接受跨域传来的数据并处理。请求的跨域script标签中的代码则是执行这个函数，里面包含跨域的数据：fun1(data)。这样跨域的数据就可以被原有的前端js接受并处理了。
我们来看一下最简单的JSONP的例子：
html代码，直接浏览器打开即可
<html>
<body>
<div>
receive <span id="qwerty"> </span>
</div>
</body>
<script>
function callfun(data) {
document.getElementById('qwerty').innerHTML = data;
}
</script>
<script src="http://127.0.0.1:10010/js?call=callfun"></script>
</html>
后端使用的egg.js，核心代码只有ctx.body那一句
'use strict';
const Controller = require('egg').Controller;
class JsonpController extends Controller {
async index() {
const { ctx } = this;
console.log(ctx.query);
ctx.set('content-type', 'text/javascript');
ctx.body = ctx.query.call + '("nihao")';
}
}
为了让后端知道我们前端的回调函数的名字，我们在script的请求中加入了call=callfun参数，后端接收到ctx.query.call， 再和'("nihao")'合并，最后形成了字符串 callfun("nihao")这一句JS代码，传到前端。
这个"nihao"就是我们从后端跨域传输到前端的数据了。
callfun函数处理这个数据，显示到了屏幕中。