几种跨域方法总结

为什么需要跨域？

因为浏览器的同源策略的限制，所以在进行数据传输时需要进行跨域操作。
什么是同源：即具有相同的端口、域名、协议的两个页面。

Paste_Image.png

同源策略：具有不同源的两个页面限制资源的交互，为了隔离潜在的恶意文件。

跨域方法：

1. document.domain

在JS中可以用document.domain属性获取或者设置当前页面的域，当然仅可在当前的域名树中向上设置。利用这一方法可以针对那些同端口、同协议并且域名不同但是一级域名相同的页面进行修改域名，从而实现跨域操作。
方法为：
比如一个页面（页面a）的域名为：aaa.xxx.com另一个页面（页面b）的域名为：bbb.xxx.com，在a页面中的iframe标签中对b页面进行了引入，这样由于两个页面的域名不同是无法进行资源交互的。所以可以在相应两个页面的js文件中将其域名进行修改：

document.domain="xxx.com"

这样ab两个页面就可以进行资源交互了。
document.domain的特点：可以解决那些主域相同、端口相同、协议相同的页面之间的资源交互。
缺点是：如果一个页面中嵌入了多个iframe,则需要将这些iframe的域名都修改为一个，这样如果有一个网站遭受到了安全攻击，则所有的都会引起安全漏洞。

2. window.name

window.name是一个窗口的name属性，它有一个特性，就是在窗口的生命周期内，所有载入该窗口的页面都共享该值。

例如：
a页面：aaa.com/a.html
proxy页面（代理页面）：aaa.com/proxy.html
b页面：bbb.com/b.html

需要把b页面的资源传给a页面，这样可以在a页面中加入一个iframe标签，该标签中的src指向b页面，并将b页面的window.name设置为需要传递的数据。这样iframe窗口的window.name就是这个数据了。监听a页面是否载入了iframe页面，当载入后将iframe的src属性指向proxy页面，因为a页面与代理页面域相同，这样a页面就可以访问iframe的window.name属性从而获取数据。

3. window.postMessage

HTML5引入了window.postMessage的API，可以解决跨窗口通信，不论是否同源。

4. JSONP

JSONP就是将服务器的json数据用函数的形式包裹起来，以script标签的形式进行传递。因为script标签的形式不会有跨域的限制。这样客户端通过以下AJAX方法获取数据。

$.ajax({
    type: 'get',
    async: false,
    dataType: 'jsonp',
    url: urlIp + "analysis?ip=" + nodeValue + "&click_type=" + clickType,
    jsonp: 'callback',
    jsonpCallback: "foo",
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        console.log(XMLHttpRequest, textStatus, errorThrown);
        alert("请求失败，请输入正确的搜索条件");
    },
    success: function (data) {
        console.log(data)
    }
})

JSONP的缺点：只支持GET请求，所以不可以对服务器的资源进行更改。

参考：https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy
https://iiong.com/cross-domain-resolution.html