简谈JSONP

1. 同源政策（Same-origin Policy）

浏览器出于安全方面的考虑，只允许与同源下的接口交互。

所谓"同源"指的是"三个相同"。

• 协议相同：如都是http 或者 https
• 域名相同：www.example.com/dir 和 www.example.com/dir2/
• 端口相同：如都是80端口

目前，如果非同源，共有三种行为受到限制。

1. Cookie、LocalStorage 和 IndexDB 无法读取。
2. DOM 无法获得。
3. AJAX 请求不能发送。

比如： 用户打开了 页面:baidu.com/yyy， 当前页面下的 js 向 baidu.com/xxx的接口发 ajax 请求，浏览器是允许的。但假如向:google.com/xxx发ajax请求则会被浏览器阻止掉，因为存在跨域调用。

2. JSONP(JSON with padding)

（1）产生的原因：

1. Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准；
2. 不过聪明的开发人员们发现，Web页面上调用 JS 文件时则不受是否跨域的影响（不仅如此，还发现凡是拥有 "src" 这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>）；
3. 于是，当前阶段如果想通过纯web端跨域访问数据，就是在远程服务器上设法把数据装进 JS 格式的文件里，供客户端调用和进一步处理；
4. 恰巧有一种叫做 JSON 的纯字符数据格式可以简洁的描述复杂数据，更妙的是 JSON 还被 JS 原生支持
5. 所以，web客户端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的JS格式文件（一般以JSON为后缀），显而易见，服务器之所以要动态生成JSON文件，目的就在于把客户端需要的数据装入进去。
6. 为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个 callback 参数给服务端，然后服务端返回数据时会将这个 callback 参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

（2）基本原理

JSONP是服务器与客户端跨源通信的常用方法。

它的基本思想是： 网页通过添加一个 <script> 元素，向服务器请求JSON数据，并且该请求的查询字符串有一个callback 参数，用来指定回调函数的名字，这种做法不受同源政策限制； 服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

举个栗子：

请求方：frank.com 的前端程序员（浏览器）

响应方：jack.com 的后端程序员（服务器）

1. 请求方创建 <script>，src 指向响应方，同时传一个查询参数 ?callbackName=yyy

<script src="http://api.jirengu.com/weather.php?callbackName=showData"></script>
复制代码

2. 响应方根据查询参数 callbackName，构造形如

   ⅰ. yyy.call(undefined, '你要的数据')

   ⅱ. yyy('你要的数据') 这样的响应

之前后端返回数据： {"city": "hangzhou", "weather": "晴天"}
现在后端返回数据： showData({"city": "hangzhou", "weather": "晴天"})
复制代码

3. 浏览器接收到响应，就会执行 yyy.call(undefined, '你要的数据') 那么请求方就知道了他要的数据

这就是 JSONP。

（3）jQuery 用法

用jQuery实现JSONP调用：

 $.ajax({
   url: "http://jack.com:8002/pay",
   dataType: "jsonp",
   success: function( response ) {
     if(response === 'success'){
       amount.innerText = amount.innerText - 1
     }
   }
 })
复制代码

提问： JSONP 为什么不支持 POST？

答：

1. 因为 JSONP 是通过动态创建 script标签实现的
2. 创建 <script> 只能发送 get 请求

参考链接

• 阮一峰，浏览器同源政策及其规避方法
• 说说JSON和JSONP，也许你会豁然开朗，含jQuery用例
• 「每日一题」JSONP 是什么？

转载于:https://juejin.im/post/5cd2a119f265da039e200970