在我们日常开发过程中偶尔会遇到“跨域”问题，一般指的是由浏览器的同源策略（CORS）导致的“异源请求”错误。

导致这个问题出现的原因是浏览器出于安全考虑，会在网页进行请求时对“异源请求”做出一些限制，这些限制会在某些情况下导致“响应”被拦截，从而出现“跨域问题”又称“异源问题”。

这些限制则被统称为“同源策略”。

既然是浏览器出于安全因素搞出来的 同源策略 ，那么何为“同源”何为“异源”？

源的定义：源 = 协议 + 域名 + 端口，三者一致则为“同源”，反之则为“异源”。

举例：

在页面加载的时候会请求很多资源，如：css、js、图片、字体等…，这些都可以视为“请求”。同源请求的定义是相对当前页面，请求目标的源与当前页面的源一致，则被称为“同源请求”，反之则为“异源请求”。

举例：

※ 重点 ※

CORS是一套机制，用于浏览器校验跨域请求。基本原理是，只要服务器明确表示 允许 ，则校验 通过。服务器明确表示 拒绝 或 没有表示，则校验 不通过。

这个解决方案主要是让“客户端的请求”和“服务端的响应”符合 CORS 机制即可。

CORS 将请求分为两类“简单请求”和“预检请求”，两者处理方式有稍许差异。

简单请求（发送&接收&校验）：满足以下三点则被判定为简单请求，浏览器会直接进行处理。

预检请求（检查&发送&接收&校验）：浏览器会先向服务器查询是否可以处理相关请求，检查项目一般有（允许源、方法、头、免检时间），查询结果如果符合请求条件则会真正的发送请求，如果不符合服务器条件则不发送请求。

JSONP 的原理是利用 同源策略对标签发起的异源请求限制较小 的特点，预先设置回调函数，通过 JS 创建标签的方式发送请求。服务端响应结果是调用预先设置好的函数将数据当作参数传入到回调函数中来实现通信操作。

注：这种方式并不是 XHR 或 Fetch，且仅支持 GET 请求。

在开发过程中我们有时候获取的资源是无法被我们控制的，比如说我们做一个网页，要显示最新的《王者荣耀》英雄列表。咱们通过王者官网的接口获取数据，这个时候咱们就无法通过操作服务端来解决跨域问题。

因为无论是 CORS 还是 JSONP 的方式都需要服务端进行配合才可以实现。（毕竟腾讯的客服电话都是机器人接听，向让它给服务器权限？简直emmm~自行体会…）

对于无法操作服务端的场景，我们一般采用代理服务器转发请求的方式进行解决。因为“同源策略”是浏览器做出的限制。服务器与服务器之间通信是没有这层限制的。

我们通过中间加一层可以自己控制的代理服务器转发请求到目标服务器。代理服务器拿到结果再返回给我们。这样就可以实现与不可控服务端的通信了。