为什么使用代理能解决同源策略限制

可能很多人像我一样对使用代理解决同源策略限制的原理感到疑惑。我想是因为没有搞清楚同源的源从哪里来。下面我将从下面几点回答上面的问题：

1. 什么是同源策略；还是要先回顾，加深理解；
2. 同源的源怎么确定？
3. 解决同源策略限制的方式。

1. 什么是同源策略

同源策略是一个重要的安全策略，它用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。
如果两个 URL 的协议、端口 (en-US)（如果有指定的话）和主机都相同的话，则这两个 URL 是同源的。
它能帮助阻隔恶意文档，减少可能被攻击的媒介。例如，它可以防止互联网上的恶意网站在浏览器中运行 JS 脚本，从第三方网络邮件服务（用户已登录）或公司内网（因没有公共 IP 地址而受到保护，不会被攻击者直接访问）读取数据，并将这些数据转发给攻击者。

更多查看https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

注意：只有浏览器与服务器交互时才有同源策略机制，这是浏览器为了安全而设置的。

2. 同源的源怎么确定？

同源策略的触发，最少需要有两个不同的源，源就是所访问资源所在服务器的协议+主机+协议。这里使用两个不同的源举例，如下图所示：

解释：浏览器向http:192.168.1.2:8080请求一个资源，该资源又通过ajax向http:192.168.1.3:8080请求数据。
在本次请求中第一个源和第二个源怎么确定？第一个源就是首次访问的资源的源，第二个源就是该资源通过ajax访问的源。这里的第一个源就是http:192.168.1.2:8080，第二个源就是http:192.168.1.3:8080。这里因为两个源不一致，就会触发浏览器的同源策略。
注：一般通过ajax请求会有同源策略限制

3. 解决同源策略限制的方式

从2中我们知道源怎么确定了，这时我们来解决同源策略限制。

3.1 顺从同源策略的规范，只访问同源的资源（代理方式）

通过代理，保证了第一个源和第二个源都是同一个源，即浏览器向代理服务器请求网页，此时该源就是代理服务器，然后该网页通过ajax访问其他的资源，但是也是访问代理服务器，此时第一个源和第二个源是一致的，然后由代理服务器进行路径映射代理访问资源并返回，可以看到资源是从代理服务器返回的。通过代理即消除了非同源的现象，如下图：

解释：浏览器向http:192.168.1.4:8080代理服务器请求一个资源，该资源又通过ajax向http:192.168.1.4:8080代理服务器请求数据。

3.2 CORS（跨域资源共享）方式

未完待续…