持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

前言

在之前的篇章中我们讲到跨域的解决方案CORS，这里就不做过多的阐述，需要明确的是CORS是作为目前跨域http请求的普遍解决方案。

跨域

跨域是指由于浏览器同源策略限制的一类请求场景。

同源策略

所谓同源，就是指两个地址，协议://域名:端口，三者必须一致，若有一个不一致都会因为非同一源而产生跨域。

例如： 从https://www.baidu.com 跳转访问 www.baidu.com也是会产生跨域行为的。

为什么会有同源策略

总的来说，同源策略是浏览器出于安全考虑，这主要表现在三个层面：

• DOM层面，同源策略限制了来自不同源的JS脚本对当前DOM对象的读写操作。假如没有这样做，那么随便一个网站的脚本都可以对别的网址进行DOM操作，这是很危险的。

• 数据层面，同源策略限制了不同源的站点读取当前站点的cookie、indexDB、LocalStorage等数据，如果没有同源策略，那么恶意获取用户的信息将变得很容易，这是极其不安全的。

• 网络层面，同源策略限制了通过XMLHttpRequest等方式将站点的数据发送给不同源的站点。假如没有这么做，那作为资源提供商每天将接收处理外部链接请求，这将会加大资源提供商服务器的压力。

但是有三个特殊的标签不受此限制，他们分别是img标签、link标签、script标签。

为什么是他们？我们都知道Web世界是开放的，同源策略的产生意味着HTML文件、CSS文件、JS文件、图片等资源将部署到同一个服务器下，这无疑违背了开放的初衷，假如将这些文件部署在不同的CDN上，那么资源将因为同源策略而无法相互访问。所以，img、link、script等标签就是为了在不同源的情况下可以引用外部文件资源，这也是浏览器对于web开放的外链。

然而，引用第三方文件又会带来一些问题，如浏览器首页内容被恶意程序劫持等，其中最典型的就是XXS攻击了，为了解决这一问题，浏览器又引入内容安全策略，称为CSP(核心思想是通过服务器告知浏览器哪些资源可以加载、哪些脚本可以执行)。通过这些手段可以大大减少XXS攻击。

说完跨域的背景和产生，我们需要知道的是CORS是浏览器为跨域处理提出的一种解决方案，同时也必须明确，跨域仅出现在浏览器，服务器与服务器通信是不存在跨域的！

所以本质上来讲，跨域的请求接收的数据是已经到达浏览器，只是被浏览器拦截隐藏了，跨域行为触发时则做出驳回提示。

小结

本篇章我们主要介绍跨域的产生背景，我们需要明确一下几点：

• 跨域请求能发出去，并且服务端也能收到请求并正常返回结果，只是结果被浏览器拦截了。
• 跨域仅存在浏览器，脱离浏览器是不存在跨域的。
• CORS 支持所有类型的 HTTP 请求，是跨域 HTTP 请求的根本解决方案。