由于浏览器的同源策略,跨域成为前端开发过程中一个不能绕过的部分,常用的跨域方法有 JSONP,CORS等
概述
目前,所有浏览器的最新版本都支持 CORS,IE不能低于IE10,移动端开发更适用一点。
CORS的实现方面,浏览器会自动检测跨域AJAX,所以前端方面并不需要多做些什么。CORS的实现主要在于服务端是否实现了 CORS接口。
CORS的具体实现
CORS请求分为两大类,简单请求和非简单请求,浏览器对这两种请求的处理方法不一样
1.简单请求
当AJAX请求满足以下方法时称之为简单请求:
- 请求方法为 GET/HEAD/POST
- 请求头首部字段为以下的子集
Accept Accept-Language Content-Language Content-Type
其中 Content-Type的值只能为 application/x-www-form-urlencoded,multipart/form-data,text/plain
对于简单请求,CORS的处理方式如下:
- 在简单请求AJAX首部添加字段 Origin,Origin字段的值为本次发送AJAX的源(协议+域名+端口)。然后服务器根据这个值决定是否允许跨域。
- 如果服务器不允许跨域,会返回一个不包含 Access-Control-Allow-Origin 字段的正常的HTTP响应,浏览器收到响应后抛出错误,被XMLHttpRequest捕获
- 如果服务器允许跨域,响应头中会多出几个字段,分别是:
- Access-Control-Allow-Origin :表示的是服务器允许接受跨域的来源 url
- Access-Control-Allow-Credentials: 表示是否允许发送 Cookie,如果为 true表示允许,其他情况则不允许
- Access-Control-Expose-Headers: 表示客户端XMLHttpRequest除开基本字段外能够拿到的头字段。
基本字段包括:Cache-Control,Content-Language,Content-Type,Expires,Last-Modified,Prama
- 如果客户端需要发送Cookie,则需要设置 withCredentials为 true,否则就算服务器允许发送 Cookie,浏览器也不会发送
xhr.withCredentials = true
2.非简单请求
不能满足简单请求的情况一般都为非简单请求,此时应先发送预检请求,待请求通过后,再发送正式的请求
- 预检请求的请求方式为 OPTIONS,携带有两个字段,一个是正式请求的发送方式 Access-Control-Request-Method: PUT,另一个是正式请求的携带的额外头部 Access-Control-Request-Headers: X-PINGOTHER
- 预检请求发送后,服务器会返回响应,如果服务器同意跨域,则会返回带有 Access-Control-Allow-Origin头部的响应。如果服务器否定跨域,则会返回一个正常的响应,但是没有 CORS有关的任何头部字段,此时触发错误,而XMLHttpRequest会捕获传递给回调方法
- 如果服务器同意跨域,则返回的响应中包含以下几个字段
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 86400
Access-Control-Allow-Origin, Access-Control-Allow-Credentials和简单请求一样,分别是允许跨域的来源地址和允许发送 Cookie
Access-Control-Allow-Headers 表示服务器能够接受的额外的请求头,这里服务器会把所有能接受的请求头都返回,再次发送请求时则无需再验证
Access-Control-Allow-Methods 表示服务器能够接受的请求方式,同样,这里也会把所有能接受的请求方式都返回
Access-Control-Max-Age 表示此次预检的有效期,在有效期内再次发送非简单请求则无需再发送预检
同时,浏览器内部维护了一个预检的最大有效期,如果 Access-Control-Max-Age的有效期时间大于浏览器内部的有效期时间,则以浏览器内部有效期时间为准