jsonp的原理与实现

Posted 2021-04-30 前端乖乖

jsonp是一种跨域通信的手段，它的原理其实很简单：

1. 首先是利用script标签的src属性来实现跨域。

2. 通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。

3. 由于使用script标签的src属性，因此只支持get方法

下面详细讲讲如何实现jsonp。

1. 实现流程

1. 设定一个script标签

   
   

2. callback定义了一个函数名，而远程服务端通过调用指定的函数并传入参数来实现传递参数，将fn(response)传递回客户端

   
   

3. 客户端接收到返回的js脚本，开始解析和执行fn(response)
   

2. jsonp简单实现

一个简单的jsonp实现，其实就是拼接url，然后将动态添加一个script元素到头部。

前端js示例

服务器端代码

然而，这个实现虽然简单，但有一些不足的地方：

1. 我们传递的回调必须是一个全局方法，我们都知道要尽量减少全局的方法。

2. 需要加入一些参数校验，确保接口可以正常执行。

3. 可靠的jsonp实现

使用示例

原文转载：https://zhangguixu.github.io/2016/12/02/jsonp/

前端圈--打造专业的前端技术会议

为web前端开发者提供技术分享和交流的平台

打造一个良好的前端圈生态，推动web标准化的发展

官网：http://fequan.com

投稿：[e-mail]

赞助合作：[e-mail]