前面我们知道了,当浏览器发送了跨域的非简单请求时,会自动触发options请求,那么什么是非简单请求,什么是简单请求呢?
简单请求和非简单请求的区别:
对于跨域请求如果符合以下所有条件,浏览器将其视为简单请求:
1、使用下列方法之一:
- GET
- HEAD
- POST
2、HTTP 头部限制以下字段:
- Accept
- Accept-Language
- Content-Language
- Content-Type (只限于以下三个值:text/plain、multipart/form-data、application/x-www-form-urlencoded)
- DPR
- Downlink
- Save-Data
- Viewport-Width
- Width
3、请求中的任意 XMLHttpRequestUpload 对象均没有注册任何事件监听器
XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问
4、请求中没有使用 ReadableStream 对象。
非简单请求:简单请求以外的Cros请求,浏览器一律将其视为非简单请求。
对于简单请求,浏览器直接发出 CORS 请求。并且头信息之中,增加一个 Origin 头部字段。
比如下面这个例子,浏览器检查跨源 Ajax 请求是简单请求,自动在 Request 头部中添加一个 Origin: http://www.example.com 字段。
GET /resources/public-data/ HTTP/1.1
Host: https://api.qingstor.com
User-Agent: Mozilla/5.0...
Accept-Language: en-US
Origin: http://www.example.com
...
Request 头部中的 Origin 字段表明本次请求来自哪个源,服务器根据这个值,决定是否同意这次请求。如果服务器允许此次请求,服务器返回的 Response 头部中会多出几个字段。比如下面例子中 Access-Control-Allow-Origin: http://www.example.com ,表示服务器允许此次跨域请求, 值也可以是一个*,表示接受任意域名的请求。
HTTP/1.1 200 OK
Date: Sun, 04 Jul 2021 10:27:32 GMT
Server: nginx
content-type: text/html; charset=UTF-8
Access-Control-Allow-Origin: http://www.example.com
...
当浏览器接收到服务器返回的响应后,将检查响应头部中 Access-Control-Allow-Origin 与请求头部中的 Origin 比较是否一致后决定这个请求是否可以突破同源策略的限制,进行下一步的处理。