前端 - 跨域 - 疑问

Question

最近在看跨域的知识，介于不是很了解其使用场景，故非常难受。

1. 前端跨域这个技术是有何需求发展起来的？
2. 其常见的使用场景是什么呢？
3. 需要访问其他服务器资源，api之类的，后端服务器处理很方便，为何要前端来处理呢？（只是单纯的想让浏览器来做处理，不增加服务器负担么？）

补充：
明明浏览器默认禁止的，有安全问题，有诸多不便，为何还要排除万难，历经艰辛要从前端发送请求？

Answer 1

1 前端跨域这个技术是有何需求发展起来的？

最早的网页大家以浏览为主，从一个页面点到另外一个页面，与服务器的交互就这么点儿，所以web的标准其实也没有考虑到互联网发展那么快，所以根本没有为跨域做好准备。当前端交互越来越复杂，用户对页面可用性，易用性要求越来越高的时候，就需要通过前端异步的做更多事情，其中有部分事情就需要跨域。有了跨域的需求，标准又没有及时更进，那么技术人员就只能依靠自己力量来解决了。比如jsonp, iframe等等，后来标准跟上 xhr可以跨域，CORS协议来跨域。

2 其常见的使用场景是什么呢？

自己的服务器不能提供所有服务（或者说有一些现成的服务可以利用），比如 我要活得当前用户所在的经纬度（要精确的），那么一些地图公司可能就有一些开放稳定的api能用。自己开发的成本又特别高。跨域场景就来了

前后端分离，前端页面和后端服务所部署的域名也不一定在同一个域，会产生跨域的需求。特别是越大的团队、大企业，业务众多、开发又要工程化，要把所有业务都整合到一个域名下几乎不太可能。

3 需要访问其他服务器资源，api之类的，后端服务器处理很方便，为何要前端来处理呢？（只是单纯的想让浏览器来做处理，不增加服务器负担么？）

如果前端能依靠自己的技术稳定的解决跨域调用，那么没有必要通过一次后端透明代理。所以这个是一个解决成本的问题。显然不通过后端带来的成本更低。

Answer 2

前端跨域只能用jsonp之类的去处理，往往做跨域配置应该在后端，也是出于安全性考虑，这还有必要去想？我还不懂除了jsonp外用什么前端技术能做跨域而不需要后端改代码的，cross也需要后端配合，所以这种问题不必考虑，这是团队大佬应该去衡量的事。

Answer 3

1. 关于跨域的原由：这个其实没啥好疑惑的，为了安全，同源策略有了，源、域：由协议【https、http】+域名【a.com】+端口【80、443】组成，（ie中略有不同），同源策略是浏览器的核心安全策略，目的是将来自不同源的资源进行隔离，并控制不同源资源间的通信，从而减少安全威胁，增强安全性。

   那么问题来了：如果两个不同的源都是我们自己的，a.com、b.com都是公司的，还有一些公用的接口，你是打算后端部署两套还是希望打破同源，实现复用？后者就是需要跨域的根本。

2. 常见的使用场景就是一个公司有多个域，里面有多个相同的接口，就打个比方：淘宝的某个商品放入购物车，你在购物车、商品详情页等地方都需要或者商品数据，但是这两个页面不是一个域【源】下，那么就会复用接口，通过跨域获取数据了。
3. 想要前端实现也是为了复用，不同域名大多时候对应不同的后端，如果后端部署多套不是很浪费吗？或者是后端通过http请求去封装数据避免跨域，这种情况也是有的，但是在一个接口需要多种域下使用，通过前端跨域是最合理的。只有可能需要爬取非自己源下的数据时，后端是第三方，无法单独依靠前端获取数据时，才会考虑后端去抓数据，然后封装成自己的异步接口，这个很多套壳网站会这么做。

顺便可以看看：https://segmentfault.com/a/11...
https://rawbin-.github.io/%E5...

Answer 4

前端跨域主要原因就是因为浏览器的“同源策略”，你访问异源的后台接口，就出现跨情况

Answer 5

1. ajax
2. 页面资源跟接口不在一个源上。一个比方，视频服务跟数据服务放在了两个服务上，页面需要请求多个非同源的服务。
3. 跨域本身就是要服务端处理的(cors全是服务端处理，JSONP也需要服务端配合)。当然也有用服务器做转发的处理方式。

---

补充的东西就不合适了，请求都是从前端开始的

Answer 6

什么是跨域？
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子：

http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）

http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）

http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）

http://www.123.com:8080/index... 调用 http://www.123.com:8081/serve... （端口不同:8080/8081，跨域）

http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）

请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。
本身浏览器是禁止ajax跨域的，但是有的项目是前后台完全分离的项目，前台是改一个project后台是一个project。你页面的ajax请求后台的数据显示到页面上是就存在了跨域访问。
1、JSONP：

使用方式就不赘述了，但是要注意JSONP只支持GET请求，不支持POST请求。

2、代理：

例如www.123.com/index.html需要调用www.456.com/server.php，可以写一个接口www.123.com/server.php，由这个接口在后端去调用www.456.com/server.php并拿到返回值，然后再返回给index.html，这就是一个代理的模式。相当于绕过了浏览器端，自然就不存在跨域问题。

3、PHP端修改header（XHR2方式）

在php接口脚本中加入以下两句即可：
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

Answer 7

1. 你有两个站点（两个域）A和B，A里面的js想去拿B网页（dom，cookie，storage）或者后台的数据（通过ajax），这个时候，你必须跨域，除非你的运行环境可以关闭同源策略（比如在 Electron）。
2. 多个域互相协作，比如你可以打开淘宝网站，看看下面加载了多少个不同域得的资源。当需要访问的资源和当前网页的资源不同域，你就需要跨域。跨域不是你想跨就能跨，很多时候，你需要先去和资源控制方协商。
3. 多一层服务器处理多一层时间消耗。如果能通过简单的协商（jsonp 或者 CORS）达到直接通信，何乐而不为呢？如果是不受控制无法协商的第三方（人家也没义务支持你对吧），那就只能自己做一个后台去拿数据了。

喜欢的话点个赞呗。:)

Answer 8

说说JSON和JSONP，也许你会豁然开朗

Answer 9

为了安全，制定了浏览器的同源策略跨域请求方法