就是要跨域

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

简书同步
blog同步

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

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的限制，那我们还聊什么跨域呢？