前端开发的童鞋，应该都有听过跨域请求，但这其中的细节可能还不清楚，比如：
<pre>
- 什么是跨域请求？
- 为什么会存在跨域请求？
- 跨域请求是怎么工作的？
- 如何解决跨域请求？
</pre>
1. 什么是跨域请求
跨域请求 - 访问其他域名的资源，随着业务的复杂化及前后端的分离，我们需要经常访问其他域名的资源，因此这里就涉及到跨域访问，下图给出了跨域访问的例子
2. 为什么会存在跨域请求
可能有童鞋就说了，何必这么麻烦，直接允许访问不就行了，也许前期就是这样，于是就出现了CSRF（跨站请求伪造），可以看下图：
因此网站A就必须添加访问限制，即决策是否允许网站B访问
3. 跨域请求是怎么工作的
跨域请求针对不同的请求会采用不用的策略，这里罗列如下：
3.1 简单模式（Simple requests）
请求方法:
GET
HEAD
POST
请求头:
Accept
Accept-Language
Content-Language
Content-Type
Content-Type:
application/x-www-form-urlencoded
multipart/form-data
text/plain
满足以上特征的请求就是Simple request，采用如下工作模式:
- 浏览器从网站B获取html资源
- 浏览器发送请求到网站A，并携带网站B的Origin，如Server-b.com
- 网站A检测自身的Access-Control-Allow-Origin是否包含Origin，如果包含返回正确数据，否则返回空
PS： Access-Control-Allow-Origin: * 表示允许所有网站方法
3.2 预检模式（Preflighted requests）
除了简单请求外，其他请求访问前需要先发一条预检请求，比如采用OPTIONS，采用如下工作模式:
- 浏览器从网站B获取html资源
- 浏览器发送OPTIONS请求，并携带如下信息
- Origin - 网站B域名
- Access-Control-Request-Method - 待请求方法，如POST
- Access-Control-Request-Headers - 待请求头信息
- 网站A检测自身的Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers是否包含客户端发送的值
- 如果包含，则返回200，浏览器发送真正的请求（也需要携带CROS信息），服务器返回正确数据
- 如果不包含，则返回错误，并返回Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers
4. 常见错误
- 4.1 Access-Control-Allow-Origin不匹配
一般会报如下错误：已拦截跨源请求：同源策略禁止读取位于 http://127.0.0.1:19110/uptoken 的远程资源。（原因：CORS 头 'Access-Control-Allow-Origin' 不匹配 '1'）
解决方法：检测服务端配置的Access-Control-Allow-Origin，应该包含前端所在服务的域名
- 4.2 Access-Control-Allow-Headers不匹配
一般会报如下错误：已拦截跨源请求：同源策略禁止读取位于 http://127.0.0.1:19110/uptoken 的远程资源。（原因：来自 CORS 预检通道的 CORS 头 'Access-Control-Allow-Headers' 的令牌 'if-modified-since' 无效）
解决方法：检测服务端配置的Access-Control-Allow-Headers，应该包含前端发送的Access-Control-Request-Headers（可以抓包看前端发送的数据）
更多
- 跨域是浏览器行为
- HTTP access control (CORS)
- 浅谈CSRF攻击方式
