CORS请求

一、简介

CORS(跨域资源共享 Cross-origin resource sharing)是实现跨域的一种常用方式。实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信

二、CORS的两种请求

(1)简单请求(simple request

(2)非简单请求(not-so-simple request)

简单请求必须同时满足以下两大条件:

1、请求方式是:GETPOSTHEAD中的一种

2、http请求头限制为这几种字段:AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-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字段时就会抛出一个错误,被XMLHttpRequestonerror回调函数捕获。

四、浏览器对非简单请求的处理方式

非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUTDELETE,或者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字段是必需的。它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段)

4Access-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.

 

posted @ 2019-01-09 18:12  pwy  阅读(444)  评论(0编辑  收藏  举报