简单请求
简单请求要满足两个条件:
请求方法为:HEAD、GET、POST
header中只能包含以下请求头字段:
Accept
Accept-Language
Content-Language
Content-Type: 所指的媒体类型值仅仅限于下列三者之一
text/plain
multipart/form-data
application/x-www-form-urlencoded
浏览器的不同处理方式
对于简单请求来说,如果请求跨域,那么浏览器会放行让请求发出。浏览器会发出cors请求,并携带origin。此时不管服务端返回的是什么,浏览器都会把返回拦截,并检查返回的response的header中有没有Access-Control-Allow-Origin是否为true,说明资源是共享的,可以拿到。如果没有这个头信息,说明服务端没有开启资源共享,浏览器会认为这次请求失败终止这次请求,并且报错。
非简单请求
只要不满足简单请求的条件,都认为是非简单请求。
发出非简单cors请求,浏览器会做一个http的查询请求(预检请求)也就是options。options请求会按照简单请求来处理。那么为什么会做一次options请求呢?
检查服务器是否支持跨域请求,并且确认实际请求的安全性。预检请求的目的是为了保护客户端的安全,防止不受信任的网站利用用户的浏览器向其他网站发送恶意请求。
预检请求头中除了携带了origin字段还包含了两个特殊字段:
Access-Control-Request-Method: 告知服务器实际请求使用的HTTP方法
Access-Control-Request-Headers:告知服务器实际请求所携带的自定义首部字段。
比如:
OPTIONS /resources/post-here/ HTTP/1.1
Host: bar.other
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Origin: http://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type
复制代码
以上报文中就可以看到,使用了OPTIONS请求,浏览器根据上面的使用的请求参数来决定是否需要发送,这样服务器就可以回应是否可以接受用实际的请求参数来发送请求。Access-Control-Request-Method告知服务器,实际请求将使用 POST 方法。Access-Control-Request-Headers告知服务器,实际请求将携带两个自定义请求标头字段:X-PINGOTHER 与 Content-Type。服务器据此决定,该实际请求是否被允许。
什么时候会触发预检请求呢?
发送跨域请求时,请求头中包含了一些非简单请求的头信息,例如自定义头(custom header)等;
发送跨域请求时,使用了 PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH等请求方法。
我得意的说“讲完了,老妹你听懂了吗?”
妹子说“似懂非懂”
那行吧,带你看下实际场景。(借鉴文章CORS 简单请求+预检请求(彻底理解跨域)的两张图)
妹子说“这样就明了很多”,满是崇拜的关闭了Bug。
兄弟们,妹子都懂了,你懂了吗?😄