JSONP跨域

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

首先说下同源和非同源，同源策略：协议、域名、端口这三个都相同则为同源，只要其中有一个不相同则为非同源，这时候就产生了跨域的问题。

举例如下：
http://qianwandu.com/3000 到 https://qianwandu.com/3000 会出现跨域，因为两个地址的协议不同。
http://qianwandu.com/3000 到 http://qianwandu.com/3032 会出现跨域，因为两个地址的端口不同。
http://qianwandu.com/3000 到 http://wandu.com/3000 会出现跨域，因为两个地址的域名不同。

下面就看下JSONP是如何实现解决跨域请求的问题的。

首先大家应该都应该注意到，script标签的src、img标签的src和link标签的href都没有呗同源策略所限制，比如当我们使用字体图标的时候，可以直接使用link标签的href引用字体图标生成的外部连接。

    <link rel="stylesheet" href="//at.alicdn.com/t/font_1402330_
    y6mfa8e8a1.css">

但要注意的是无论是srcipt、img的src还是link的href发送的都是get请求，这也就是JSONP跨域只能用get请求的原因。

JSONP跨域使用方法：

function fn(data){
    console.log(data);
}

<script src="http://www.baidu.com?callback=fn"></script>

如上：在srcipt标签的src拼接一个callback值为一个函数，请求回来的数据会默认传给对应的函数作为第一个参数。

如果是在做某些操作的时候发送的跨域请求，也可以使用动态生成元素的方法进行JSONP请求，示例代码如下：

let btn = document.getElementById("btn");
    btn.onclick = function(){
        // 动态创建script标签
        let script  = document.createElement("script");
        // 设置script的src属性，属性值为要请求的url地址
        script.src = "http://localhost:3000/list?username=hello&content=world&callback=fn";
        // 将script标签添加到body中
        document.body.appendChild(script);
    }

function fn(data){
   console.log(data);
   document.body.removeChild(script);
}

工作原理：就是利用了script 标签没有跨域限制的“漏洞”来达到与第三方通讯的目的。当需要通讯时，本站脚本创建一个 script 元素，地址指向第三方的API网址，并提供一个回调函数来接受数据(函数名是前后端约定好的)，第三方产生的响应为JSON数据包装，这样浏览器会调用callback函数，并传递解析后的JSON对象作为参数。本站脚本可在callback函数里处理所传入的数据。

JSONP的优缺点
优点
1）它不受同源策略的限制，可以跨域请求。
2）兼容性好，比较老版本的浏览器也可以运行。
3）在请求完毕后通过callback的方式回传结果，将回调方法的权限给了调用方，这就相当于将controller层和view层分开了。我提供的JSONP服务只提供纯服务的数据，至于提供服务以后的页面渲染和后续view操作都由调用者来自己定义就好了。如果两个页面需要渲染同一份数据，只需要有不同的渲染逻辑即可。
缺点
1）JSONP只支持GET请求，不支持其他类型的HTTP请求。
2）只支持跨域HTTP请求，不能解决两个不同域的页面之间进行js调用的问题。
3）在调用失败后不会返回任何HTTP状态码。
4）安全性不好，容易被攻击。所以在使用时必须保证使用的JSONP服务是安全可信的。