跨域6种方法-JSONP

跨域6种方法：

JSONP

document.domain

window.name

localtion.hash

H5 postmessage

服务器代理中转

JSONP原理：

利用<script>标签没有跨域限制的漏洞来达到与第三方的通讯的目的

当需要通讯的时候，可以创建一个<script>标签，它的src指向第三方的API地址

并提供一个回调函数来接受数据（函数名可以约定，或者通过地址参数传递）。第三方产生的响应应为json数据的包装（故称之为jsonp，即jsonpadding），形如：callback（{”name“：”hax“，”gengder“：”Male“}），这样的话，浏览器就会调用callback函数，并传递解析后json对象作为参数，本站脚本可以在callback函数里处理所传入的数据。

web页面上script引入js文件不受跨域的影响，不仅如此，凡是有src属性的标签都不受同源策略的影响。

正是这个特性，我们可以把资源直接放到script标签的src里面，这样我们就把数据放到了服务器上，并且是使用json的形式。（js可以轻松操作json数据）

但是由于我们无法监控script的src的加载状态，不知道数据有没有获取完成，所以我们要事先定义好处理函数

jsonp的缺点

1.优点

    1.1它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制，JSONP可以跨越同源策略；

    1.2它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持

    1.3在请求完毕后可以通过调用callback的方式回传结果。将回调方法的权限给了调用方。这个就相当于将controller层和view层终于分开了。我提供的jsonp服务只提供纯服务的数据，至于提供服务以后的页面渲染和后续view操作都由调用者来自己定义就好了。如果有两个页面需要渲染同一份数据，你们只需要有不同的渲染逻辑就可以了，逻辑都可以使用同一个jsonp服务。

2.缺点

    2.1它只支持GET请求而不支持POST等其它类型的HTTP请求

    2.2它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

    2.3 jsonp在调用失败的时候不会返回各种HTTP状态码。

    2.4缺点是安全性。万一假如提供jsonp的服务存在页面注入漏洞，即它返回的javascript的内容被人控制的。那么结果是什么？所有调用这个 jsonp的网站都会存在漏洞。于是无法把危险控制在一个域名下…所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的。