总结前端跨域解决方案

什么是同源策略

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

IndexDB、LocalStorage 和 Cookie无法读取
Js对象和DOM无法获得
AJAX 请求不能发送

同源需要：(<img><link><script>三种标签不受限制)

我们可以根据同源策略的定义，总结出常见的6种跨域场景：

遇到上述这些情况，根据我们应用的技术，我们可以总结出来9种跨域解决方案：

实现跨域的常用方式

通过jsonp跨域

利用<script>标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。优点是兼容老式浏览器，但是只支持get而且不太安全，一般不用。基于此原理，我们可以通过动态去创建script，再请求一个带参网址实现跨域通信。

jsonp缺点：只能实现get一种请求。

var script = document.createElement("script");
script.type = "text/javascript";

//传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
script.src =
  "http://www.baidu.com:8080/login?user=admin&callback=handleCallback";
document.head.appendChild(script);

//回调执行函数
function handleCallback(res) {
  console.log("res =", res);
}

CORS跨域

跨域的请求其实是发出去了的，只不过被浏览器给拦截了，因为不安全，说直白点儿就是，你想要从服务器哪儿拿个东西，但是没有经过人家允许啊。所以怎么样才安全？服务器允许了不就安全了，这就是 CORS 实现的原理：使用额外的 HTTP 头来告诉浏览器，让运行在某一个 origin 上的 Web 应用允许访问来自不同源服务器上的指定的资源。

目前，所有的主流浏览器都支持 CORS，其中，IE 浏览器的版本不能低于 10，IE 8 和 9 需要通过 XDomainRequest 来实现。

简单请求

若请求满足所有下述条件，则该请求可视为“简单请求”：

允许的方法之一：

Fetch 规范定义了对 CORS 安全的首部字段集合

不得人为设置该集合之外的其他首部字段。该集合为：

Accept
Accept-Language
Content-Language
Content-Type （需要注意额外的限制）
DPR
Downlink
Save-Data
Viewport-Width
Width

Content-Typ 的值仅限于下列三者之一：

text/plain
multipart/form-data
application/x-www-form-urlencoded

预检请求

与前述简单请求不同，“需预检的请求”要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。