跨域的方式及解决

参考：同源策略

JSONP跨域实现和解决方式

• 它的工作原理在于script标签不受同源策略限制，并且请求得到script资源后会立即执行。
• 做法：服务端接到请求后返回数据data，而data被当做参数放在callback中把chuacallback(data)返回给请求端。callback在请求端已经定义好，当callback(data)到达时被当做js执行，然后展示在页面上。

CROS 实现跨域

CORS全称是跨域资源共享（Cross-origin resource sharing），是一种ajax跨域请求资源的方式，支持现代浏览器，IE支持10以上
CROS 实现跨域的方式很简单和发送ajax请求几乎一样，不同之处在与服务端在收到请求时需要自响应头加上Access-Control-Allow-Origin：请求的域名，或者所有*；
那么这个实现就就简单了，发送请求和ajax一样，回应时加上响应头加上Access-Control-Allow-Origin：origin就可以了。

postMessage实现跨域

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源 。

降域实现跨域

由于同源政策，不同的框架之间是可以获取window对象的，但却无法获取相应的属性和方法；这个时候，document.domain就可以派上用场了，我们只要把涉及的两个页面的document.domain都设成相同的域名就可以了。但要注意的是，document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。

注意：

应该注意到，降域和postMessage都是针对于跨源脚本访问（个人理解就是不同的frame互相访问，并不涉及到对服务器的请求）例子server,例子a.html,例子b.html。
效果：在左面（右面）输入内容时其右面（左面）也会出现相同的文字（分别用跨域和postMessage实现）

image.png