前端开发 | 那些年曾谈起的跨域(2)

通过对百度的即时搜索的分析就可以简单的看出JSONP的实现原理，请求会的js文件中包含一个函数，其函数名称就是连接中cb的参数最为参数传给后台，后台通过处理并在执行这个与参数对应的函数的，当函数执行的时候将把数据以实参的形式传递给对应的函数，解决跨域问题。为了方便阅读这里只截取了代码片段。

案例：

前端代码：

$('#btn').click(function(){  
    var frame = document.createElement('script');  
    frame.src = 'http://localhost:5000/jsonp?name=aaron&age=18&callback=query';  
    $('body').append(frame);  
});  
function query(res){  
    console.log(res.message+res.name+'你已经'+res.age+'岁了');  
}  

后端代码：

router.get('/jsonp', (req, res) => {  
    let {name,age,callback} = req.query;  
    let data = {message:'success',name,age};  
    data = JSON.stringify(data);  
    res.end(`${callback}(${data})`);  
});  

通过如上代码就可以简单的实现JSONP，虽然JSONP解决了跨域的问题，还是有很多弊端的，比如会在页面中添加一些script标签，数据不能双向操作等等。

使用JSONP的时候尤其要注意一点，一定要把插入的script放到所应用函数的下面。这个和js的执行顺序有关系，如果把script标签放在上面的话，其方法还没有被读取在script标签中就执行了这个方法必定报错的，这点很重要哦。

document.domain

document.domain项目中一般应用的较少，默认情况下document.domain存放的是载入文档的服务器的主机名。可以在控制台输出一下，得到的则是segmentfault.com这个域名。我在项目中所用到的则是结合iframe的时候遇到的跨域，并使用的domain解决的。

在使用document.domain实现跨域的时候需要注意一下，这两个域名必须属于同一个一级域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域。Javascript出于对安全性的考虑，而禁止两个或者多个不同域的页面进行互相操作。而相同域的页面在相互操作的时候不会有任何问题。

简单的解释一下，例如想要在www.a.com中将看到segmentfault.com中的内容并将其网页使用iframe将其嵌入到其网页中，但是此时浏览器是不允许通过JavaScript直接操作segmentfault.com的，因为这两个页面属于不同的域，在操作之前浏览器会检测是否符合同源策略，如果符合则允许操作，反之则不行。

若想要同过document.domain实现跨域的话，必须使其满足同源策略，这个时候就需要用到document.domain，document.domain都设成相同的域名就可以了。但要注意的是，document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。

例如：

a.com  
news.a.com  

news.a.com属于a.com的一个子域名，按照上面所说已经满足了上面的规则，如果想要实现跨域操作就需要对接子页面的document.domain进行操作。

父页面：

document.domain = 'a.com';  
var ifr = document.createElement('iframe');  
ifr.src = 'news.a.com/map.html';  
ifr.style.display = 'none';  
document.body.appendChild(ifr);  
ifr.onload = function(){  
    var doc = ifr.contentDocument || ifr.contentWindow.document;  
    var oUl = doc.getElementById('ul1');  
    alert(oUl.innerHTML);  
    ifr.onload = null;  
};  

（编辑：ASP站长网）