### ==jsonp方案== - JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。 jsonp本来就是要请求访问服务器端的一个js文件，现在返回的是Js代码，于是浏览器可以不再进行拦截直接进行响应。 - JSONP实现跨域请求的原理: 动态创建\<script>标签，然后利用\<script>的src 不受同源策略约束来跨域获取数据。 - JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。 ```javascript <script> var script = document.createElement('script'); // 创建script标签 // 设置回调函数：数据请求回来会被触发的函数 function getDate(data) { console.log(data); } // 设置script的src属性，设置请求地址 script.src = 'http://localhost:3000?callback=getData'; document.body.appendChild(script); // 让script生效 </script> ``` - 优点：浏览器兼容性好，简单易用，支持浏览器与服务器双向通信。 - 缺点：只支持GET请求，且只支持跨域HTTP请求这种情况（不支持HTTPS） - 1、通过jsonp跨域script 标签的src属性可以跨域引用文件，jsonp是请求之后后台包装好一段json，并且把数据放在一个callback函数，返回一个js文件，动态引入这个文件，下载完成js之后，会去调用这个callback,通过这样访问数据。 在浏览器端定义一个回调函数，并将函数名通过src传至服务器端； 服务器端将数据包装成为一段js数据，并返回js函数格式的js文件，接着拿到这个js文件之后函数自动调用，拿到后端返回的数据。 #### 优点： ~~~ 1.1它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制，JSONP可以跨越同源策略； 1.2它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持； 1.3在请求完毕后可以通过调用callback的方式回传结果。 将回调方法的权限给了调用方。这个就相当于将controller层和view层终于分开了。 我提供的jsonp服务只提供纯服务的数据，至于提供服务以 后的页面渲染和后续view操作都由调用者来自己定义就好了。 如果有两个页面需要渲染同一份数据，你们只需要有不同的渲染逻辑就可以了， 逻辑都可以使用同 一个jsonp服务。 ~~~ #### 缺点 ~~~ 2.1它只支持GET请求而不支持POST等其它类型的HTTP请求 2.2它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。 2.3 jsonp在调用失败的时候不会返回各种HTTP状态码。 2.4缺点是安全性。万一假如提供jsonp的服务存在页面注入漏洞，即它返回的javascript的内容被人控制的。 那么结果是什么？所有调用这个 jsonp的网站都会存在漏洞。 于是无法把危险控制在一个域名下…所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的。 ~~~