就是要跨域

小鱼儿 2022-07-15 03:11 172阅读 0赞

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

[简书同步][Link 1]  
[blog同步][blog]

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

> ![1240][]

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

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

它们都有一个相似的特点，即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的限制，那我们还聊什么跨域呢？

![订阅号同步][20160928125140236]

[Link 1]: http://www.jianshu.com/p/34b7b42b185e
[blog]: http://flypursue.com/
[1240]: /images/20220715/bc7f7f3e35db45dbb42a6d2491400c92.png
[20160928125140236]: /images/20220715/0b90dde03a844d3d9149cb62fdf4e015.png

就是要跨域

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关跨域、跨域问题

相关禁止跨域_什么是跨域，以及为什么浏览器要做“跨域限制”

相关 ajax能突破跨域吗,AJAX_js 跨域和ajax 跨域问题小结，js 要跨域的话，可以用：

相关就是要跨域

相关跨域与跨域访问

相关跨域

相关为什么要有跨域限制

相关跨域

相关为什么要有跨域限制

相关跨域