本节内容：何为跨域？何为同源策略？

• 跨域：但是在实际的场景中，又确实有很多地方需要突破同源策略的限制，也就是我们常说的跨域
• 同源策略：为了保证用户信息的安全，防止恶意网站窃取用户数据，同源策略做了很严格的限制——只允许本域内的脚本读写本域内的资源

---

一、何为跨域？

说到跨域，有必要先了解一下同源策略。

1）同源策略

同源策略（Same origin policy）是由 NetScape 公司在1995年提出的一种安全策略；
同源策略只是一个约定，提出后被各个浏览器厂商采纳，并以各自的方式实现了同源策略。

• 何为同源策略？

• 同源策略：是浏览器最核心也最基本的安全功能，会约束浏览器的行为；
• 同源策略会限制浏览器：只允许本域内的脚本读写本域内的资源，不允许访问本域外的资源。

• 为何需要同源策略？

• 为保证用户信息的安全，防止恶意网站窃取用户数据，浏览器需要实现严格限制

• 例如：我刚登陆了某宝网，此时再去登陆 B 网站，B 网站就可以使用 JS 获取到我的某宝账户信息，然后它做什么都可以了。

• 如何判断是否同源？

• 判断要素有三：协议、域名、端口号；

• 三者全部一致才视为同源，即属于同一个域；否则视为非同源。

• 限制范围

在非同源情况下，存在如下受限行为：

1. 无法共享 cookie, localStorage, indexDB
2. 无法操作彼此的 dom 元素
3. 无法发送 ajax 请求

2）跨域

• 域

域（Domain）是Windows网络中独立运行的单位；
域之间相互访问则需要建立信任关系，信任关系是连接在域与域之间的桥梁；
当一个域与其他域建立了信任关系后，2个域之间不但可以按需要相互进行管理，还可以跨网分配文件和打印机等设备资源，使不同的域之间实现网络资源的共享与管理.

• 跨域

• 跨域
  突破同源策略的限制，在两个不同的域之间（非同源页面）实现资源交互。

本域（同源）和跨域是一对，就像国内企业和跨国企业，这样更形象理解跨域概念

• 跨域分类
  1）使用 Ajax 引发的跨域问题
  当调用 Ajax 时：调用 Ajax 发送请求的页面 所在的域，和被请求页面所在的域不一致
  2）类似页面嵌入 ifream 引起的跨域问题
  当操作 ifream 内引入的元素时：ifream 所属页面的域，和 ifream 引入页面的域不一致

自己分的类，为了方便记忆，刚接触时还把它们弄混了
但本质都一样，即：突破同源策略限制，请求域外资源

二、为何需要跨域？

• 在实际的场景中，确实有很多地方需要突破同源策略的限制，也就是我们常说的跨域
• 如果网站足够简单，一个网页搞定，好吧这样确实不需要跨域，但更多时候，我们需要它
• 例如：
• 我想要制作一个天气预报软件，就需要获取气象局的检测信息
• 我想要制作一个音乐盒，就需要获取音乐信息……

三、跨域实现方法？

1. JSONP

2. CORS

3. 降域

4. postMessage

---

具体的实现方法，移步到这里！

1. 跨域之二：JSONP 和 CORS

2. 跨域之三：降域 和 postMessage

---

本文章著作权归饥人谷和本人所有，转载须说明来源！