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

通过对百度的即时搜索的分析就可以简单的看出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

（编辑：萍乡站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!