jsonp跨域原理解析

背景

由于浏览器同源策略的限制，非同源下的请求，会产生跨域问题，要想拿到非同源下的资源数据，那么jsonp就可以帮你解决这个问题。

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

jsonp突破同源策略限制：

我们要通过利用img、srcipt，link标签的src或href属性（到底使哪个标签无所谓）来实现，那么我们如何做呢，我们来看一段简单的代码，为了方便，我这里使用jQuery：

$('#btn').click(function(){
			var dom = document.createElement('script');
			dom.src = 'http://localhost:3000/list?name=mali&callback=func';
			$('body').append(dom);
		})

我们点击按钮的时候，创建了一个script标签(即会发送一个get请求到src指向的地址)，src地址是"localhost:3000/article-list",这个src地址，就是我们请求的服务端接口。注意：name和我们平时传的参数一样，那么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/list?name=mali&callback=func';
			$('body').append(frame);
		});
		
		function func(res){
			alert(res.message+'我的名字叫'+res.name);
		}
  </script>

这里可以看到，我们声明了一个func函数，但没有执行，你可以想一下，如果服务端接口到get请求，返回的是func({message:‘hello’})，这样的话在服务端不就可以把数据通过函数执行传参的方式实现数据传递了吗。

服务端代码实现：

router.get('/list', (req, res) => {
  console.log(req.query, '123');
  let data = {
    message: 'success!',
    name: req.query.name,
  }
  data = JSON.stringify(data)
  res.end('func(' + data + ')');
})

接下来当我们点击提交的时候，就获取到了服务端反回的数据
alert弹出success!我的名字叫mali