CORS原理（为什么会发OPTIONS方法及问题总结）

最新推荐文章于 2024-04-29 10:43:29 发布

Henry_楠

最新推荐文章于 2024-04-29 10:43:29 发布

阅读量944

点赞数

文章标签： http 服务器前端

本文链接：https://blog.csdn.net/haonan_z/article/details/122105620

版权

跨域资源共享(CORS)是一种机制，是W3C标准。它允许浏览器向跨源服务器，发出XMLHttpRequest或Fetch请求。并且整个CORS通信过程都是浏览器自动完成的，不需要用户参与。

而使用这种跨域资源共享的前提是，浏览器必须支持这个功能，并且服务器端也必须同意这种"跨域"请求。因此实现CORS的关键是服务器需要服务器。通常是有以下几个配置：

过程分析：

浏览器先根据同源策略对前端页面和后台交互地址做匹配，若同源，则直接发送数据请求；若不同源，则发送跨域请求。
服务器收到浏览器跨域请求后，根据自身配置返回对应文件头。若未配置过任何允许跨域，则文件头里不包含 Access-Control-Allow-origin 字段，若配置过域名，则返回 Access-Control-Allow-origin + 对应配置规则里的域名的方式。
浏览器根据接受到的响应头里的 Access-Control-Allow-origin 字段做匹配，若无该字段，说明不允许跨域，从而抛出一个错误；若有该字段，则对字段内容和当前域名做比对，如果同源，则说明可以跨域，浏览器接受该响应；若不同源，则说明该域名不可跨域，浏览器不接受该响应，并抛出一个错误。

另外在CORS中有简单请求和非简单请求，简单请求是不会触发CORS的预检请求的，而非简单请求会。

“需预检的请求”要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。"预检请求“的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。

简单请求不会触发CORS的预检请求，若请求满足所有下述条件，则该请求可视为“简单请求”：

简洁版：

只能使用GET、HEAD、POST方法。使用POST方法向服务器发送数据时，Content-Type只能使用application/x-www-form-urlencoded、multipart/form-data
或 text/plain 编码格式。
请求时不能使用自定义的HTTP Headers

完整版：

(一) 使用下列方法之一

GET HEAD POST
(二) 只能设置以下集合中的请求头

Accept Accept-Language Content-Language Content-Type(但是有限制) DPR
Downlink Save-Data Viewport-Width Width
(三) Content-Type的值仅限于下面的三者之一

text/plain multipart/form-data application/x-www-form-urlencoded
请求中的任意XMLHttpRequestUpload 对象均没有注册任何事件监听器；XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问。
请求中没有使用 ReadableStream 对象。

除了上面这些请求外，都是非简单请求。

若是跨域的非简单请求的话，浏览器会首先向服务器发送一个预检请求，以获知服务器是否允许该实际请求。

整个过程大概是：

浏览器给服务器发送一个OPTIONS方法的请求，该请求会携带下面两个首部字段：
Access-Control-Request-Method: 实际请求要用到的方法
Access-Control-Request-Headers: 实际请求会携带哪些首部字段
若是服务器接受后续请求，则这次预请求的响应体中会携带下面的一些字段：
Access-Control-Allow-Methods: 服务器允许使用的方法
Access-Control-Allow-Origin: 服务器允许访问的域名
Access-Control-Allow-Headers: 服务器允许的首部字段
Access-Control-Max-Age: 该响应的有效时间(s),在有效时间内浏览器无需再为同一个请求发送预检请求
预检请求完毕之后，再发送实际请求

关于Access-Control-Max-Age，浏览器自身也有维护一个最大有效时间，如果该首部字段的值超过了最大有效时间，将不会生效，而是以最大有效时间为主。
当你勾选了浏览器的 Disable cache选项时，会导致浏览器每次非简单请求都会发送预检请求

这里只做记录使用，后续再持续优化，想了解更多，可以参考以下文章：

关注