OPTIONS 预检请求

OPTIONS 预检请求

什么是 OPTIONS 预检请求?

预检请求是浏览器在发送某些跨域请求之前,会发送一个 OPTIONS 请求,目的是为了确认服务器是否允许该跨域请求。

什么情况下会触发预检请求?

1. 发送非简单请求时

简单请求包括 GETHEADPOST,因此,当发送除了这三个方法之外的请求时,例如 PUTDELETEPATCH,浏览器会先发送一个 OPTIONS 请求,询问服务器是否允许该请求。

2. Content-Type 为 application/json 时

Content-Typeapplication/json 时也会触发遇见请求, 而值为 application/x-www-form-urlencodedmultipart/form-datatext/plain时则不会触发预检请求。

3. 当存在自定义请求头时

当请求头中存在自定义请求头时或者在标准请求头中设置非标准内容时,也会触发预检请求。

OPTIONS 预检请求流程

OPTIONS 请求会包含一下头部信息:

  • Origin:请求来源的域名
  • Access-Control-Request-Method: 实际请求所使用的 HTTP 方法
  • Access-Control-Request-Headers:实际请求所携带的自定义请求头

服务器需要在响应头中返回一些 CORS 相关的头部信息,例如:

  • Access-Control-Allow-Origin:允许跨域请求的域名
  • Access-Control-Allow-Methods:允许跨域请求的方法
  • Access-Control-Allow-Headers:允许跨域请求的自定义请求头

如果 HTTP 请求满足服务器返回的响应头中的信息, 即服务器允许当前请求的跨域访问,那么浏览器才会发送实际的 HTTP 请求。否则,浏览器会拒绝该请求,并在控制台中输出报错信息。

预检请求的缓存

预检请求并不会每次都发生,是因为浏览器会对预检请求进行缓存,服务器通过设置 Access-Control-Max-Age 来指定预检请求的缓存时间。

如果设置为 86400,指 24 小时内不再预检。

如果设置为 -1,则表示不缓存,每次请求前都会发送预检请求。

相关推荐
YGY Webgis糕手之路17 分钟前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失94920 分钟前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue86820 分钟前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie26 分钟前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_28 分钟前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到1138 分钟前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
风清云淡_A44 分钟前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js
@大迁世界1 小时前
第7章 React性能优化核心
前端·javascript·react.js·性能优化·前端框架
前端Hardy1 小时前
HTML&CSS:惊艳!科技感爆棚的登录页面代码解析
前端·javascript·html
我是哈哈hh1 小时前
【AJAX项目】黑马头条——数据管理平台
前端·javascript·ajax·前端框架·axios·proxy模式