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

╰半橙微兮° 2023-01-07 10:08 207阅读 0赞

![a383a912374f65d2b62734a4aa70fd03.png][]

不明白为什么大家解释“跨域限制”这个事情都这么费劲？！动不动就给出一堆学术名词，神马“同源策略”“限制加载”blabla… 一上来就用高度抽象的词语来解释，初学者可能只会说一句：请说人话。

“跨域”是在browser做的限制，按照 client-server 的模型，就是在client端做了些限制。如果我们先不考虑跨域，那么，假设在页面上对某个按钮的点击，涉及到需要请求第三方（third-party）网站的数据请求，我们有哪些解决方案呢？

*  最直观的想法是，既然你需要访问third-party的信息，那么，我直接从browser这里（即client端）发送一个异步请求（Ajax）就好了。
 *  稍微绕一点的方法是：我把需要请求的third-party的信息发送给自己的server端，让server端去发送对third-party的请求。server端拿到返回的数据后，再回传给client端。

显然，第一种方法要直观得多，第二种方法感觉就是多此一举。特别是后端的同学，更是会赞同这个意见：你前端需要啥数据，自己去调用访问不就完了，拿给我去访问干嘛？我拿到了还要回传给你，你有这么懒么？！

所谓的“跨域限制”，就是browser这边直接把第一种解决方案给禁止掉了，强制性要求，任何对third-party的数据请求，都必须回传给自己的server端，让你自己的server端去做处理，再把信息回传到client端。

（如何判断是不是third-party的请求？！很简单啊，你的网站本身是有一个域名的，你的域名是绑在自己的server ip上的。任何不是以你自己域名开头的请求，都被认为是third-party的请求。所谓的“同源”，指的就是“和你自己相同的请求源，即相同的域名”。）

如上所说，这个“禁止”，是谁做的？仅指浏览器而已。而如果client端是手机App呢？又或者是桌面App呢？那当然，它是不受这种方式的限制的，因为这样的native App不受浏览器的控制，所以可以直接在client端发出third-party的请求。后端的同学，当然也会兴高采烈地告诉App端的同学，请自己发送请求，切莫来找我。

那为什么浏览器要做这种奇葩限制呢？答案当然就是为了整个web生态的安全啊！一个最直观的作恶方式便是，如果你在browser这边的js代码可以任意访问third-party的数据，那么你可以让你的js代码定时轮询对这个third-party的访问，比如每秒访问一次。那么，任何正在浏览你的网页的用户，都会以每秒一个请求的频率对这个third-party的网站做访问。假设有十万人在浏览你的网页，那么这个third-party的网站就不得不承受每秒10万次的无效访问。这谁受得了。。。当然，这里说的是你去作恶他人。但如果放开了同源策略，就是人人平等的，别人也可以用同样的方式来作恶你的网站。如此这般，整个web生态将充斥着这样海量的无效请求，以至于大家都没办法正常地访问web页面了，因为带宽都被无效请求吃掉了。

所以，即便是单单考虑这一种作恶方式，第一种直观而便捷的对第三方信息的请求方式，都应该被禁止掉。当然，你可能会说，如此，手机/桌面的App端是不是也可以如此作恶呢？！Hmmm，你可能忘记了App需要审核这件事情了。

[a383a912374f65d2b62734a4aa70fd03.png]: /images/20221119/266c61d289fa4388ae576d815e781185.png