CORS——跨域请求

1.什么是cors

CORS（Cross-Origin Resource Sharing 跨源资源共享），当一个请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。

2.cors用法分为简单请求和带认证带请求

　　简单请求

简单请求时，浏览器会直接发送跨域请求，并在请求头中携带Origin 的header，表明这是一个跨域的请求。服务器端接到请求后，会根据自己的跨域规则，通过Access-Control-Allow-Origin和Access-Control-Allow-Methods响应头，来返回验证结果。

　　带认证带请求

默认情况下，跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等)。通过将withCredentials属性设置为true，可以指定某个请求应该发送凭据。

3.cors请求过程及步骤（1.预先请求 成功后 2.进行真正的跨域请求）

　　预先请求

当请求满足下面任意一个条件时，浏览器会先发送一个OPTION请求，用来与目标域名服务器协商决定是否可以发送实际的跨域请求，即为预先请求。

　请求方法不是下列之一：

• GET
• HEAD
• POST

   请求头中的Content-Type请求头的值不是下列之一：    

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

浏览器在发现页面中有上述条件的动态跨域请求的时候，并不会立即执行对应的请求代码，而是会先发送Preflighted requests（预先验证请求），Preflighted requests是一个OPTION请求，用于询问要被跨域访问的服务器，是否允许当前域名下的页面发送跨域的请求。某个请求的预先请求只会在第一次请求时执行，如不刷新或跳转页面，第一次后不会再发预先请求。

OPTIONS请求头部中会包含以下头部：Origin、Access-Control-Request-Method、Access-Control-Request-Headers。
服务器收到OPTIONS请求后，设置Access-Control-Allow-Origin、Access-Control-Allow-Method、Access-Control-Allow-Headers头部与浏览器沟通来判断是否允许这个请求。
如果Preflighted requests验证通过，浏览器才会发送真正的跨域请求。

 如果Preflighted requests验证失败，则会返回403状态，浏览器不会发送真正的跨域请求，可以通过浏览器的Console查看具体的验证失败原因，会说跨域预先请求验证不通过，要你设置请求头什么的

 注意，当withCredentials属性设置为true，需要response header中的'Access-Control-Allow-Origin'为一个确定的域名，而不能使用'*'这样的通配符。

4.对请求所带对字段进行解释

Request Method: OPTIONS   表示为预先请求　　　　 Request Method:  POST   表示为真正请求时的方式，可前端请求时指定

Status Code: 200 OK    表示请求成功                       Status Code:  403 Forbidden   表示验证请求失败，会在预发请求时就显示失败，不会进行真正的请求，根本到不了后台

 

Access-Control-Allow-Credentials:  true     是否携带认证信息，是否可以显示跨域请求返回的内容，ture 表示允许源发送带凭据的请求(cookie、HTTP认证及客户端SSL证明等) 可前端请求时指定

 

Access-Control-Allow-Headers:  content-type, x-requested-with   实际发送跨域请求时，可以支持的请求头，可以是一个具体的请求头列表或是一个*（表示任意请求头）。简单请求时，浏览器会根据此响应头的内容决定是否给脚本返回相应内容，预先验证请求时，浏览器会根据此响应头决定是否发送实际的跨域请求。

 

Access-Control-Allow-Methods:  GET,HEAD,POST   实际发送跨域请求时，可以支持的请求方法，可以是一个具体的方法列表或是一个*（表示任意方法）。简单请求时，浏览器会根据此响应头的内容决定是否给脚本返回相应内容，预先验证请求时，浏览器会根据此响应头决定是否发送实际的跨域请求。

 

Access-Control-Allow-Origin    携带了服务器端验证后的允许的跨域请求域名，可以是一个具体的域名或是一个*（表示任意域名）。简单请求时，浏览器会根据此响应头的内容决定是否给脚本返回相应内容，预先验证请求时，浏览器会根据此响应头决定是否发送实际的跨域请求。

 

Access-Control-Request-Headers   用于在预先请求时，告知服务器要发起的跨域请求中会携带的请求头信息

 

Access-Control-Request-Method    用于表明跨域请求使用的实际HTTP方法 可前端请求时指定

 

Host:   massif.cloud.alipay.com  表示跨域请求的接口域名        Origin:   https://kbase.cloud.alipay.com   标明发起跨域请求的源域名

Content-Type，内容类型，用于定义网络文件的类型和网页的编码，决定浏览器将以什么形式、什么编码读取这个文件，这就是经常看到一些Asp网页点击的结果却是下载到的一个文件或一张图片的原因。可前端请求时指定

 5.服务端处理机制

　　服务器端对于跨域请求的处理流程如下：

1. 首先查看http头部有无origin字段；
2. 如果没有，或者不允许，直接当成普通请求处理，结束；
3. 如果有并且是允许的，那么再看是否是preflight(method=OPTIONS)；
4. 如果不是preflight（简单请求），就返回Allow-Origin、Allow-Credentials等，并返回正常内容。
5. 如果是preflight（预先请求），就返回Allow-Headers、Allow-Methods等，内容为空；

6.配置cors规则（下面是借用别人的截图，从事前端开发，下面是后台的一些配置）

1.nginx上的CORS配置

2.OSS上的CORS配置

3.CDN上的CORS配置

 

注意：由于CDN的缓存特性，CDN配合OSS时，需要在CDN中设置CORS配置。