起因
说起来源...今天去茶水间倒水时,偶然听到公司面试官在问面试者前端跨域的如何解决。我心中默默想了一想,啪啪啪瞬间想出几个关键词,iframe,cors,同源策略,jsonp...转念一想,虽然这是很常见的面试题,然而我在开发过程中,还真没有用过jsonp这种方式...就连原理也说不好。一阵冷汗,? ,赶紧去找了相关资料。
同源策略
对于同源策略,在这里我就不多累赘叙述了,简单来说,如果以下三项:同一协议、同一域名、同一端口但凡有一项不满足,浏览器就会把 No 'Access-Control-Allow-Origin' header is present on the requested resource
甩你一脸。
解决方案
跨域问题可以说在前端方面不可避免,但同源策略毕竟在保护网络信息安全方面起到很大的作用。试想如果没有同源策略,别的网页可以轻松窃取你的cookie,而假如你的cookie中存有你的个人信息...太可怕了,不过话说回来同源策略带来的跨域问题也很头疼,幸好现在已经有多种方式能够解决。
CORS 跨域资源共享策略(
JSONP
window.name
document.domain(主域相同的情况下可用)
postMessage(h5新引入)
websocket(h5新引入,不受同源策略限制,所以说h5真是个好东西...?)
...
由于篇幅有限(好吧...其实是我写不了那么多),在这里对于其他解决方式就不一一详解了。
正主来了,JSONP
JSONP
是 JSON with Padding
的简称,是一种较为常用的解决跨域访问的方式。我们先来看一段示例代码:
ajax({//此ajax方法是封装了XMLHttpRequest对象实现,具体代码与本文无关就不贴了
method : 'get',
url : 'http://127.0.0.1:8787',
data : {
'name' : '小明',//此ajax方法会自动将数据以get方式提交
'age' : 22
},
success : function (message) {
alert(message);
},
async : true
})
上面的代码很简单,浏览器端发起了一个异步ajax请求,让我们来看看服务端代码:
app.get('*', function(req, res) {//这里只截取了关键代码
res.send("测试数据");
});
清晰,易懂~so,what happend?
不出所料,浏览器甩了我一脸...
易地再战!JSONP炸裂出场~
function showJsonp(obj){
console.log(obj.message);
}
var url = 'http://127.0.0.1:8787/?func=showJsonp'
var script = document.createElement('script');
script.setAttribute('src',url);
script.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(script);
再来后台代码~
app.get('*', function(req, res) {
let callback = req.query.func;
let content = callback+"({'message':'测试数据2'})";
res.send(content);
});
结果:
大!获!全!胜!
是时候分析一波战术策略了~在平常写代码的时候,可能很多人没有注意,浏览器对于script,iframe等标签的src等属性,是没有同源策略限制的。而jsonp就很好的利用了这一点~在我们发起请求时,url后跟了一个名为func
的参数,而这个参数就是之后需要用到的回调函数名称。
我们通过动态插入script
标签的方式,利用script标签的src属性发起请求,浏览器不会以同源策略来找事...而后台根据请求构造出的数据长啥样呢?
showJsonp({'message':'测试数据2'})
告诉我!这段代码插入你的script标签内后,会发生啥?!
当然是执行早就定义好的showJsonp函数啊~
bingo,完美解决跨域问题~~
最后
jsonp的方式兼容性非常好,即便是那些老古董浏览器,也可以用jsonp的方式解决跨域问题,但是它也有所限制,它只能使用get方式发起请求,并且对于不同域之间页面的js互相调用无能为力。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。