跨域是前端开发中非常普遍的问题，尤其是随着单页面应用（SinglePageApplication，SPA）的兴起，分离开发和部署前后端之分，前端在本地开发部署的过程中会面临跨域问题。再来说说跨域的话题，以及项目中跨域的一些实践经验，希望能带来一些新的收获。什么是跨域？首先我们要了解什么是同源策略，在MDN中有介绍：同源策略是浏览器的一项重要的安全策略，用于限制源文档或脚本的加载方式可以与来自另一个来源的资源进行交互。它有助于阻止恶意文档并减少可能的攻击媒介。从这段话我们知道，同源策略是浏览器的安全策略，来源（Origin）是判断是否满足同源策略的条件。我们常说的跨域，准确的说应该是跨域，目的是操作其他来源的资源，不受同源策略的限制。比如我们在本地开发，源是http://localhost:3000，服务器接口地址是https://api.feishu.cn。这时候通过FetchAPI访问接口就会产生跨域。同源策略源于浏览器，但在非浏览器环境下，一般不会对同源策略做任何限制。例如在Node.js中，我们可以请求任何URL并获得结果。因此，基于Node.js的服务器可以直接跨域访问资源。当然我们也可以关闭浏览器的同源策略，关闭后也可以在浏览器环境下直接跨域。以Chrome为例，可以通过在Chrome中添加启动参数来关闭：$/path/to/chrome.app--disable-web-security。关闭后浏览器会有安全隐患。建议仅用于本地开发。源协议、域名（准确的说是主机名，因为除了域名也可以是IP）、端口号是共同确定的。三者完全一样。URL被认为是同源的。举几个例子：https://www.bytedance.com和https://jobs.bytedance.com，不同的域名，不同的来源http://www.bytedance.com和https://www.bytedance。com，不同的协议，不同的来源http://localhost和http://localhost:8080，不同的端口（80和8080），不同的来源特别是当我们直接打开一个HTML文件时，我们使用文件协议来请求HTTPresources当协议不同时，就会发生跨域。允许在有限范围内修改源代码。浏览器提供API修改子域名下的源为父域名的源。比如我们在https://open.feishu.cn下执行：document.domain='feishu.CN';此时页面的源变成了https://feishu.cn，满足同源策略，所以我们可以直接访问父域名下的资源。如果修改为非父域名（如bytedance.com），浏览器会报错。同源策略控制不同源之间的操作。这些操作通常分为三类：资源嵌入：通常允许。例如表示资源嵌入不受同源策略控制，而JSONP是利用该特性的跨域实现。
