• 基本原理：

  浏览器端：动态生成一个script标签来请求后台接口，标签的src属性就是接口的url。定义一个接收响应数据的函数，并将函数名作为请求参数提交给后台。

  服务器端：接收到请求处理产生结果数据，返回一段JS代码，JS代码中会对定义好的函数执行调用，并将结果数据作为实参传给函数。

  浏览器端：收到响应后自动执行JS代码，调用定义好的函数，得到结果数据。

• 注意：

  1、jsonp只能解决GET类型的ajax请求跨域问题。

  2、jsonp请求不是ajax请求，而是一般的get请求。

背景：

由于浏览器同源策略的限制，非同源下的请求，都会产生跨域问题，jsonp即是为了解决这个问题出现的一种简便解决方案。

同源策略即：同一协议，同一域名，同一端口号。当其中一个不满足时，我们的请求即会发生跨域问题。

举个简单的例子：

1. http://www.abc.com:3000到https://www.abc.com:3000的请求会出现跨域（域名、端口相同但协议不同）
2. http://www.abc.com:3000到http://www.abc.com:3001的请求会出现跨域（域名、协议相同但端口不同）
3. http://www.abc.com:3000到http://www.def.com:3000的请求会出现跨域（域名不同）

突破同源策略限制：

现在知道了同源策略，那我们就来看下jsonp是如何突破同源策略的限制实现跨域的

首先，不知道大家有没有注意，不管是我们的script标签的src还是img标签的src，或者说link标签的href他们没有被同源策略所限制，比如我们有可能使用一个网络上的图片，就可以请求得到

<img src="https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=6d0bf83bda00baa1a52c41bb7711b9b1/0b55b319ebc4b745b19f82c1c4fc1e178b8215d9.jpg">

src或href链接的静态资源，本质上来说也是一个get请求，拿csdn上的静态资源举例：

可以看到，确实是个get请求无疑。同理img标签的src和link标签的href也会发送一个get请求去请求静态资源。那么我们通过这点，是不是发现了点什么，这些标签的src和link属性，并没有受同源策略的限制。说到这里jsonp的实现原理就浮出水面了。

jsonp就是使用同源策略这一“漏洞”，实现的跨域请求（这也是jsonp跨域只能用get请求的原因所在）。想象一下，既然是个get请求，那么服务端一定可以接收到，并做出反馈。ok，知道这两点之后，我们开始具体使用jsonp进行跨域请求。

JSONP跨域实现：

根据上边所说的，我们要用过利用srcipt标签的src属性来实现，那么我们如何做呢，我们来看一段简单的代码，为了方便，我这里使用jQuery：

$('#btn').click(function(){
            var frame = document.createElement('script');
            frame.src = 'http://localhost:3000/article-list?name=leo&age=30&callback=func';
            $('body').append(frame);
        });
可以看到，让我们点击按钮的时候，创建了一个script标签(即会发送一个get请求到src指向的地址,注意：这里必须使用scipt标签，否则返回的数据不会被当作js执行)，

src地址是"localhost:3000/article-list",这个src地址，就是我们请求的服务端接口。

注意，这里我们有是那个参数，name,age和callback，name和age不说了，这跟我们平时普通的get请求参数无异。

主要说下callback这个参数，callback参数就是核心所在。为什么要定义callback呢？首先我们知道，这个get请求已经被发出去了，那么我们如何接口请求回来的数据呢，callback=func则可以帮我们做这件事。我们继续看下边的代码 

<button id="btn">点击</button>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $('#btn').click(function(){
            var frame = document.createElement('script');
            frame.src = 'http://localhost:3000/article-list?name=leo&age=30&callback=func';
            $('body').append(frame);
        });
        
        function func(res){
            alert(res.message+res.name+'你已经'+res.age+'岁了');
        }
  </script>
这里可以看到，我们声明了一个func函数，但没有执行，你可以想一下，如果服务端接口到get请求，返回的是func({message:'hello'})，这样的话在服务端不就可以把数据通过函数执行传参的方式实现数据传递了吗。

服务端代码实现：
接下来，我们看服务端应该如何实现：

router.get('/article-list', (req, res) => {
  console.log(req.query, '123');
  let data = {
    message: 'success!',
    name: req.query.name,
    age: req.query.age
  }
  data = JSON.stringify(data)
  res.end('func(' + data + ')');
});
ok，接下来当我们点击提交的时候，就获取到了服务端反回的数据。如下：

这样下来，就完成了实现jsonp的跨域。

代码

shelleyhlx/node-server-example - Gitee.comhttps://gitee.com/shelleyhlx/node-server-example/tree/masterwebstorm运行，首先运行server：

D:\node-server-example\example\express> node .\01\server.js

，在webstorm的浏览器运行a.html。

总结：

需要注意的是，callback参数定义的方法是需要前后端定义好的，具体什么名字，商讨好就可以了。其实jsonp的整个过程就类似于前端声明好一个函数，后端返回执行函数。执行函数参数中携带所需的数据，整个过程实际非常简单易懂，如有疑问大家可以在下方留言，我会及时回复。
————————————————
版权声明：本文为CSDN博主「机智的赵先生」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/badmoonc/article/details/82289252

同源策略 & 跨域

什么是 JSONP？

JSONP（JSON with Padding）是资料格式JSON的一种“使用模式”，可以让网页从别的网域获取资料。 —— 维基百科

JSONP 核心原理

• script 标签不受同源策略影响。
• 动态插入到 DOM 中的 script 脚本可以立即得到执行。

实现步骤

1. 客户端创建一个 JavaScript 函数，用来接收服务端返回的数据。

function onResponse(data) {
    // do something
}

2. 客户端动态插入 script 标签执行请求。

var script = document.createElement('script')
script.src = 'protocal://domain:port/path?callback=onResponse'
document.head.appendChild(script)
document.head.removeChild(script)

3. 服务端将数据和 js 回调函数名拼接为函数调用的字符串并返回给客户端。

app.get('/path', function(request, response) {
    var data = getData()
    var callback = request.query.callback
    var result = `${callback}(${JSON.stringify(data)});`
    response.send(result)
})

4. 客户端接收到 script 标签响应并自动执行回调函数。

JSONP 的缺点

• 只能使用 GET 请求。
• 动态插入的 script 脚本可能被注入恶意代码。