什么是“跨域”？产品经理也该懂！这篇文章用最简单的方式讲清楚跨域的原理和解决方案，读完你就能和前端工程师聊得上技术了。

定义

跨域是指浏览器从一个域名的网页去请求另一个域名的资源时，由于浏览器的同源策略限制而产生的一种请求报错现象。

什么是同源策略？

源（origin）= 域名 + 协议 + 端口，同源策略是浏览器的一个安全功能，要求协议、域名、端口都相同的情况下，网页才能进行相互访问和交互，当请求的资源与当前页面的源不同时就会触发跨域。举例说明：

常见场景

前后端分离项目：前端代码部署在http://localhost:3000，后端接口部署在http://localhost:8080，前端向后端请求数据时会跨域（端口不一致，触发跨域）；

调用第三方API：在自己的网页中需要调用如百度地图API等第三方服务，由于域名不同也会涉及跨域。

应对策略

CROS：跨域资源共享，在服务器端设置响应头的机制，允许浏览器向不同源的服务器发出请求实现跨域数据交互，服务器设置Access-Control-Allow-Origin响应头来指定允许访问的源；

感兴趣可以去浏览器控制台看看前端请求的接口的请求头信息：

JSONP：利用<script>标签不受同源策略限制的特点，通过动态创建<script>标签来请求数据，仅支持GET请求；

代理服务器：在客户端和目标服务器之间搭建一个代理服务器，客户端向代理服务器发送请求，代理服务器再向目标服务器请求数据，由于代理服务器和目标服务器之间没有跨域问题，可将获取到的数据转发给客户端。

类比一下

场景带入

同属于公司的员工才可以自由使用打印机、饮水机、零食柜、图书室等公共资源，同源 = 同公司员工

• 协议：需使用门禁刷卡进入公司
• 域名：公司地址
• 端口：从哪个门进入公司（正门、侧门、进货专用通道等）

上述3要素不一致时（即“非本公司人员”）默认被禁止使用资源。

怎么办？

• VIP通行证：公司主动给外部人员发放通行证（类似服务器在响应头中设置Access-Control-Allow-Origin），明确允许其访问指定资源；
• 躲在货车车厢：通过非正规通道进入公司，类似利用<script>标签绕过同源限制；
• 拜托公司前台帮你去打印：前台帮你跑腿，充当了代理服务器的角色。