JSONP原理与实现

• JSON with Padding（Padding 指包裹在服务端响应内容中 JSON 外层的函数名称）

• 它与 Ajax 无任何关系

• jsonp

优点

• 兼容性好，在支持创建 script 标签对的旧版本浏览器中依旧可以良好支持。

缺点

• 仅支持GET方法

• 动态创建脚本容易产生XSS攻击

原理

由于浏览器的同源策略限制，在目标域名、端口、协议不一致的情况下，将无法访问目标提供的资源。但是，HTML某些标签提供的src属性，不受该策略影响，因此可以通过该种方式获取目标资源。

1. 前端动态生成 script 标签对，并设置目标 URL 为 src 属性值。其中，目标 URL 通常会包含客户端 callback 参数名。

2. 服务端接收 callback 参数；服务端生成响应数据，并使用 callback 参数值包裹该响应内容（传递到客户端后作为函数的参数）。

3. 客户端加载完成目标资源后，响应内容将在 script 中变为正常的函数调用。

实现

需要服务端配合

前端（原生JS）

<script type="text/javascript">
const customFn = function (data) {  
 // 在获取到目标资源后，将调用该函数   
 console.log(data)
 }
 // 目标API
 const targetURL = 'https://api.shaoyaoju.org/jsonp?callback=customFn';
 // 动态创建 script 标签，并设置 src 属性
 const script = document.createElement('script');
 script.setAttribute('src', targetURL);
 // 将 script 标签插入 body，开始调用目标资源
 document.getElementsByTagName('body')[0].appendChild(script);</script>

后端（Koa.js 实现）

const get = async ctx => {   
  // 获取 callback 参数
   const { callback } = ctx.query
   // 包裹数据
   const data = callback + `({"data": {"key": "value"}})`
   ctx.body = data
}