前端跨域方法之CORS

时间:2024-04-09 16:48:31
1、cross-domain
CORS:是需要浏览器和服务器同时支持,IE浏览器不能低于IE10。整个跨域过程不需要用户的参与,从表面上看,CORS与ajax没有区别,代码相同,但是一旦浏览器发现跨域,它会自动在HTTP头部中添加附加信息(例如domain),关键在于服务器是否实现了CORS接口。
CORS请求分为简单请求和非简单请求。
前端跨域方法之CORS
只要满足上面的两大条件就是简单请求,否则就是非简单请求。
一、简单请求的基本流程
对于简单请求,浏览器会直接发起跨域请求,会自动在HTTP头部加入Origin字段,如下:
前端跨域方法之CORS
跨域请求的服务器会根据这个Origin进行判断是否同意该域名的跨域请求。
如果服务器不同意,服务器会回应一个HTTP(状态为200),浏览器会在返回的HTTP头部检查Access-Control-Allow-Origin字段,如果没有该字段,就会自动报错。
如果服务器同意,浏览器的HTTP头部字段可能会多出以下字段:

Access-Control-Allow-Origin
Access-Control-Allow-Credentials
Access-Control-Expose-Header

(一)、字段解释,上述的三个头部字段都是在服务器设置:
Access-Control-Allow-Origin: 必写,请求域的domin或者(*) ,*代表着允许所有域名的跨域请求,
Access-Control-Allow-Credentials: 可写,该值是一个布尔值,表示是否允许发送Cookie,默认情况下,Cookie不包括CORS请求中。
Access-Control-Expose-Header: 在CORS请求时浏览器的XMLHttpRequest对象的getResponseHeader()方法只可以拿到六个基本字段,如果还想拿到其他字段就必须在Access-Control-Expose-Header中指定。
(二)、发送Cookie
前面我们说过,默认情况下,CORS是不发送Cookie的。但是Cookie的设置是下需要浏览器和服务器通共设置的。
服务器需要设置头部字段 Access-Control-Allow-Credentials : true,
浏览器中开发者需要在Ajax请求中设置xhr.withCredentials = true。
否则即使服务器同意发送Cookie,浏览器也不会发送,或者服务器要求设置Cookie,浏览器也不会设置。
重点(敲黑板):如果要发送Cookie,Access-Control-Allow-Origin就不能设置为*,必须指定明确与请求网页一样的域名。同时,Cookie依然遵循同源政策,只有用服务器域名设置的Cookie才会上传,其他域名的Cookie并不会上传,且(跨源)原网页代码中的document.cookie也无法读取服务器域名下的Cookie。
二、非简单请求
当发出的的请求为非简单的请求时,比如请求方法是PUT或者DELETE,或者Content-Type字段是application/json。此时浏览器会进行一次预检。
简述:在非简单请求的CORS中,在正式进行通信前,浏览器会增加HTTP请求,称为预检。
预检内容:浏览器会向服务器询问,当前网页的域名是否在许可名单中,以及可以使用哪些字段、哪些方法,只有得到肯定的回复,浏览器才可以进行Ajax通信,否则报错。
(一)浏览器设置预检字段:
Access-Control-Request-Method:必写,用来列出浏览器CORS请求可以使用的HTTP方法
Access-Control-Request-Headers:用来指定浏览器可额外发送的请求头
(二)服务器通过预检后比简单请求多出的返回字段
Access-Control-Allow-Methods: 必须设置,表明服务器支持的跨域方法,值为逗号隔开的字符串
Access-Control-Allow-Headers: 如果浏览器设置了Access-Control-Request-Headers,那么此字段也必须设置,值为逗号隔开的字符串
Access-Control-Max-Age: 该字段可选,用来指定本次预检请求的有效期,单位为秒