起因说起源头...今天去茶水间倒水的时候，无意中听到公司面试官问面试官前端跨域怎么解决。心里默默的想了想，突然想到了几个关键词，iframe，cors，同源策略，jsonp……想了想，虽然这是一道很常见的面试题，但是我在开发process，之前没用过jsonp。。。连原理都说不清楚。一阵冷汗，?，赶紧查找相关资料。同源策略同源策略这里就不多说了。简单的说，如果不满足以下三项中的一项：相同的协议，相同的域名，相同的端口，浏览器会设置No'Access-Control-Allow-Origin'headerispresentontherequestedresourceto把你扔在脸上。解决方案跨域问题在前端可以说是不可避免的，但是同源策略毕竟对保护网络信息安全有很大的作用。试想一下，如果没有同源策略，其他网页很容易窃取你的cookies，如果你的个人信息存储在你的cookies中……就很可怕了，不过话又说回来，同源导致的跨域问题-originpolicy也很头疼，幸好现在有很多方法可以解决。CORS跨域资源共享策略（JSONPwindow.namedocument.domain（主域相同时可用）postMessage（h5新引入）websocket（h5新引入，不受同源策略限制，所以h5真的是agoodthing...?)...由于篇幅有限（嗯...其实写不了那么多），其他的解决方案我这里就不详细解释了，大神来了，JSONPJSONP来了JSONwithPadding的缩写，是一种比较常用的解决跨域访问的方式。先看一个示例代码：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("testdata");});清晰易懂~所以，发生了什么？不出所料，浏览器让我很为难……又是一场战斗！JSONP爆出来~functionshowJsonp(obj){console.log(obj.message);}varurl='http://127.0.0.1:8787/?func=showJsonp'varscript=document.createElement('script');script.setAttribute('src',url);script.setAttribute('type','text/javascript');document.getElementsByTagName('head')[0].appendChild(script);然后是后台代码~app.get('*',function(req,res){letcallback=req.query.func;letcontent=callback+"({'message':'testdata2'})";res.send(content);});结果：大！韩元！完全的！赢！是时候分析一波战术攻略了~在写代码的时候，很多人可能没有注意到，浏览器对script、iframe等标签的src等属性没有同源策略限制。而jsonp就很好的利用了这一点~当我们发起请求的时候，url后面跟着一个参数，名字叫func，这个参数就是后面需要用到的回调函数的名字。我们使用script标签的src属性发起请求，动态插入script标签，浏览器不会使用同源策略来找麻烦。。。但是后台根据请求构造的数据有什么用看起来像？showJsonp({'message':'testdata2'})告诉我！当这段代码被插入到你的脚本标签中时会发生什么？！当然是执行定义好久的showJsonp函数了~bingo，完美解决了跨域问题~~最后jsonp的兼容性很好。即便是那些老浏览器也可以使用jsonp来解决跨域问题，但是它也有限制，只能使用get方法发起请求，对于不同域之间的页面之间的js调用是无能为力的。
