由于CORS(跨域)本身是具有安全隐患的,因此浏览器默认是禁止的。但跨域却在web开发中具有很重要的作用,也是前端dev经常为之头痛的领域。那么,前端到底如何跨这个域呢,且往下看。

前端常见的跨域手段如下:

1.script/link/img加载外部资源

一个网站常常会加载以下外部资源:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<img src=“http://www.otherdomain.com/apple.jpg” />

它们都有一个相似的特点,即js运行时一般很难去获取其加载的资源内容。具体来说,有时候我们经常需要请求类似http://www.otherdomain.com/data.json的文件,那我们如何能够获取这个文件的内容呢?

2.发送ajax

面对上面的问题,大多数人就会说“发送ajax请求啊”,具体实现如下:

$.get(/data.json,function(res) {});

可是不好意思亲,你这是同源的,当然能请求到了。如果你访问的是http://www.otherdomain.com/data.json,那么一定会报错,提示你不允许跨域。

其实仔细想想也不难理解,别人站点上的资源你可以通过浏览器打开访问,这没问题,因为你是处在当前的站点访问当前的资源;但是如果你在自己的站内去请求别人的资源,还能随随便便请求到的话,是你你愿意不?

所以,如果你利用ajax请求到了外部资源,只有一种情况:被访问的server端允许你跨域,即:

  • jsonp(返回script让前端调用)

  • 后端在response header中设置了Allow-Control-Allow-Origin: matcher(例如,*)

3.利用iframe

其实很容易想到,iframe本身是一个html tag,那么它和其他能够加载资源的tag类似,肯定也能加载外部页面,从这一点来说它算跨域。

但有一个很重要的前提:如果加载的iframe是一个外部页面,并且你无法修改这个页面本身(比如某个站点的首页),那么你只能在iframe里去操作其加载的页面。换言之,如果你想在主页面内访问嵌套的iframe内容,那同样还是有安全问题,是会被禁止的。

对于这种情况的处理,就得说说postMessage了。我们知道,页面内嵌套页面是会形成window链的,即top->parent->…,而postMessage可以实现不同window之间的消息传递。

假设A页面和B页面属于不同的domain,A中的iframe加载了B,那么用postMessage通信的方式如下:

  • 在B中添加消息监听事件
window.addEventListener(message, function(e){  });
  • 在A页面里找到B的window后调用postMessage发送数据
window.frames[0].postMessage(some data, '*');

可以看到B其实已经知道自己需要跨域,所以向A暴露了事件作为间接操作dom的接口,进行了自发自收的通信方式。所以只有当我们有权限修改所加载的外部页面时,postMessage才行得通。

到此,基本可以得出结论,如果在极端情况(只有前端,无法修改后端,无法修改外部资源,只有一个外部api或者url)下,前端是不能跨域的,这是浏览器的限制。

任性就是想跨域

那么也不是没有办法:我们可以修改浏览器的设置,取消浏览器对跨域的限制。

其实chrome extension app就允许你这么干,开发extension时,在mainfest.json里,如下配置你的app即可让浏览器对跨域没有任何限制:

"permissions": [
  "http://*/*",
  "https://*/*"
]

所以许多chrome的插件也由此诞生,其中votes比较多的Allow-Control-Allow-Origin就是一个不错的跨域toggle工具。

可是讲真的,你这么任性取消了CORS的限制,那我们还聊什么跨域呢?