讲解JSONP原理

为什么会有JSONP呢，什么又是JSONP呢？

JSONP是用来解决跨域问题的，以前它是跨域问题的克星，由于CORS的出现，它就慢慢的淡出了历史的舞台了，但为什么还要说它呢，主要就是面试官喜欢问啊（无奈）。

什么是跨域问题？

想要了解这个问题，那么必须要清楚 同源 和 不同源 的定义。

同源定义：两个url的地址的 协议 与 主机 与 端口 一致

不同源定义：两个url地址的 协议 主机 端口任何一个不一致

如果对于里面的相关概念不懂的朋友，用一个网站给你说明白

就拿百度网站来说的：https://www.baidu.com:443

协议： https， 主机：www.baidu.com(域名)，  端口:443

不输入端口也会默认是443，因为hhtps协议的默认端口号就是443

跨域问题其实就是：浏览器使用ajax时，如果请求的 接口地址 和当前 打开页面 地址不同源就叫跨域。

跨域问题的前提是浏览器通过ajax对服务器发送请求。那么为了解决跨域问题呢，那么久绕开ajax来发送请求，就有人使用script标签的src属性来发送请求，这样就可以解决跨域的问题了。

这个也是JSONP的原理所在

现在就来写代码展示一下吧。

这个是前端使用ajax发送请求 

这个是后端接口页面，使用node.js写的。

在这里先给大家运行看看是什么情况

 大家看第一个错误就行了，第二个错误是因为我没有开启服务器而报的。第一个错误就是跨域问题。其中报错中显示了这么一段“Access-Control-llow-Origin”，这是响应头。简单来说就是不允许你访问我，就像你去别人家被狗咬一样，把狗看成是这个错误。

CORS响应头 -Access-Control-Allow-Origin

        响应头部中跨域携带一个Access-Control-Allow-Origin字段

        其中origin参数指定了允许访问该资源的外域URL

        下面的栗子的字段值将只允许来自http://lhj.cn的请求：

            栗子：res.setHeader("Access-Control-Allow-Origin", "http://lhj.cn");

        下面的栗子的字段值将允许来自任何域的请求：

            栗子：res.setHeader("Access-Control-Allow-Origin", "*");

这就是所谓跨域问题，解决这个跨域问题其实简单，下面这行就可以搞定

res.setHeader("Access-Control-Allow-Origin", "*")；

这行代码是所有意思呢，就是允许任何域来访问。

node.js中添加 

得到的结果：

这时就解决了跨域问题了

但是这不是我们所要讲的，上面解决跨域问题其实不是使用JSONP来解决的，而是使用CORS来解决的。

这时我们就真正使用JSONP来解决问题。根据JSONP 原理，不再使用ajax案例发送请求，而是使用script标签的src属性来发送请求。

 

直接运行的结果为：

如果细心的朋友会发现在最下面还是有一个错误。其实这不算是错误吧。带大家来分析为什么会有这样的错误出现。

要讲明这个那么就必须来看看刚刚用node.js写的后端代码。

如果大家能了解红色方框的内容，那么久明白了。res.send是响应刚刚请求从前端发送过来的请求体。 模板字符串中的${req.query.callback},req.query是获取到前端的请求体数据。大家看到请求网站后面的?callback=fn没有，这个就是req.query，而req.query.callback = fn;

有些有些同学就会说为什么不把${req.query.callback}直接写成fn呢，是可以，但是这样写就写死了，如果另外一个前端的同学定义的函数为add呢。

红色方框返回到前端的内容为fn({anme: "黄家驹", age: 31})的js代码 

 

 纵观前端刚刚写的代码中，并没有找到哪里有定义fn函数。所以就会报错误，如果定义了就不会报错了，还会将其执行。来试试看吧。

得到的结果为：

 

这时就不会报错了，还会将定义的fn函数给执行。

 希望可以帮到你