ajax 跨域，这是最全的解决方案（一）

从刚接触前端开发起，“跨域”这个词就一直以很高的频率在身边重复出现，一直到现在，已经调试过 N 个跨域相关的问题了。

关于跨域，有 N 种类型，本文只专注于“ajax 请求跨域”( ajax 跨域只是属于浏览器“同源策略”中的一部分，其它的还有 Cookie 跨域 iframe 跨域，LocalStorage 跨域等这里不做介绍）

什么是 ajax 跨域

ajax 跨域的原理

ajax 出现请求跨域错误问题，主要原因就是因为浏览器的“同源策略”。

1995 年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。最初，它的含义是指，A 网页设置的 Cookie，B 网页不能打开，除非这两个网页"同源"。所谓"同源"指的是"三个相同"：协议相同、域名相同、端口相同。

随着互联网的发展，"同源政策"越来越严格。目前，如果非同源，共有三种行为受到限制。

（1） Cookie、LocalStorage 和 IndexDB 无法读取。

（2） DOM 无法获得。

（3） AJAX 请求不能发送。

CORS 请求原理

CORS 是一个 W3C 标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 AJAX 只能同源使用的限制。

基本上目前所有的浏览器都实现了 CORS 标准，其实目前几乎所有的浏览器 ajax 请求都是基于 CORS 机制的，只不过可能平时前端开发人员并不关心而已（所以说其实现在 CORS 解决方案主要是考虑后台该如何实现的问题）。

这里整理了一个实现原理图(简化版)：

如何判断是否是简单请求？

浏览器将 CORS 请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

• 只要同时满足以下两大条件，就属于简单请求。

• 请求方法是以下三种方法之一：HEAD，GET，POST

• HTTP的头信息不超出以下几种字段：

• （1）Accept

• （2）Accept-Language

• （3） Content-Language

• （4）Last-Event-ID

• （5） Content-Type（只限于三个值 application/x-www-form-urlencoded、 multipart/form-data、text/plain）

• 凡是不同时满足上面两个条件，就属于非简单请求。

本文转载自 Think 体验设计公众号。

原文链接：https://mp.weixin.qq.com/s/SvO1-Jcmm7_Ybmidmx6nnA