一、简介
CORS(跨域资源共享 Cross-origin resource sharing)是实现跨域的一种常用方式。实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信
二、CORS的两种请求
(1)简单请求(simple request)
(2)非简单请求(not-so-simple request)
简单请求必须同时满足以下两大条件:
1、请求方式是:GET、POST、HEAD中的一种
2、http请求头限制为这几种字段:Accept 、Accept-Language、Content-Language、Last-Event-ID、Content-Type:只限于三个值application/x-www-form-urlencoded(表单提交格式)
、multipart/form-data(文件上传格式)
、text/plain(纯文本格式)
凡是不同时满足上面两个条件,就属于非简单请求。
三、浏览器对简单请求的处理方式
对于简单请求,浏览器直接发出CORS请求。即在请求头信息之中,增加一个Origin
字段(Origin字段用来说明,本次请求来自哪个源(协议 + 域名 + 端口))。
服务器通过Origin值来判断是否接受此次请求。
如果同意:则服务器返回响应
响应头会多出以下几个信息字段
Access-Control-Allow-Origin
Access-Control-Allow-Credentials
Content-Type: text/html
如果服务器拒绝:服务器会返回一个正常的HTTP回应(http状态吗有可能是200,所以无法通过状态码判断此类错误),响应头中不包含Access-Control-Allow-Origin字段,浏览器没有接收到Access-Control-Allow-Origin字段时就会抛出一个错误,被XMLHttpRequest
的onerror
回调函数捕获。
四、浏览器对非简单请求的处理方式
非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUT
或DELETE
,或者Content-Type
字段的类型是application/json
。
CORS非简单请求会在正式通信之前,增加一次HTTP请求,称为“预检”请求。浏览器会先询问服务器,当前网页所在域名是否在服务器的许可名单之中,服务器允许之后,浏览器才会发出正式的XMLHttpRequest请求,否则会报错。
"预检"请求用的请求方法是OPTIONS
,表示这个请求是用来询问的。
预检请求请求头一般包含这几个字段信息
1、Origin: 关键字段(必需),表示请求来自哪个源
2、Access-Control-Request-Method :该字段是必需的,用来列出浏览器的CORS请求会用到哪些HTTP方法
3、Access-Control-Request-Headers:该字段可选,是一个用逗号分隔的字符串,指定浏览器CORS请求会额外发送的请求头信息字段
预检请求的回应:
(1)服务器确认允许跨源请求
服务器做出相应的响应,返回的响应头信息中包含以下几项重要信息字段:
1、Access-Control-Allow-Origin(
该字段是必需的。它的值要么是请求时
Origin
字段的值,要么是一个*
,表示接受任意域名的请求。)
2、Access-Control-Allow-Methods(
该字段必需,它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法)
3、Access-Control-Allow-Headers(
如果浏览器请求包括Access-Control-Request-Headers
字段,则Access-Control-Allow-Headers
字段是必需的。它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段)
4、Access-Control-Allow-Credentials(该字段可选。它的值是一个布尔值,表示是否允许发送Cookie。)
5、Access-Control-Max-Age(该字段可选,用来指定本次预检请求的有效期,单位为秒。)
一旦服务器通过了“预检”请求,以后每次浏览器正常的CORS请求,就都跟简单请求一样。
PS:如下两张图是“预检”请求和正式请求http的一些响应
图一、“预检”请求
图二、正式请求
(2)服务器不同意预检请求
如果浏览器否定了"预检"请求,会返回一个正常的HTTP回应,但是没有任何CORS相关的头信息字段。这时,浏览器就会报出以下错误:
XMLHttpRequest cannot load ...(这里是要访问的来源)
Origin ...(这里是要访问的来源) is not allowed by Access-Control-Allow-Origin.