跨域请求CORS要点

前端开发的童鞋，应该都有听过跨域请求，但这其中的细节可能还不清楚，比如：
<pre>

• 什么是跨域请求？
• 为什么会存在跨域请求？
• 跨域请求是怎么工作的？
• 如何解决跨域请求？
  </pre>

1. 什么是跨域请求

跨域请求 - 访问其他域名的资源，随着业务的复杂化及前后端的分离，我们需要经常访问其他域名的资源，因此这里就涉及到跨域访问，下图给出了跨域访问的例子

image

2. 为什么会存在跨域请求

可能有童鞋就说了，何必这么麻烦，直接允许访问不就行了，也许前期就是这样，于是就出现了CSRF（跨站请求伪造），可以看下图：

 

image

因此网站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，如果包含返回正确数据，否则返回空

image

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

image

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（可以抓包看前端发送的数据）