场景:在调用后端接口的时候会出现两次请求:OPTIONS请求和GET请求。OPTIONS请求耗费了一定的时间,需减少OPTIONS请求。

查找原因是浏览器对简单跨域请求和复杂跨域请求的处理区别。

XMLHttpRequest会遵守同源策略(same-origin policy). 也即脚本只能访问相同协议/相同主机名/相同端口的资源, 如果要突破这个限制, 那就是所谓的跨域, 此时需要遵守跨域资源共享标准CORS(Cross-Origin Resource Sharing)机制。

浏览器将CORS请求分为两类:简单请求(simple request)和非简单请求(not-simple-request)。

简单请求浏览器请求不会触发预检请求,而非简单请求会触发预检请求。这两种方式怎么区分?

同时满足下列以下条件,就属于简单请求,否则属于非简单请求(参考HTTP访问控制(CORS))

1.请求方式只能是:GET、POST、HEAD

2.HTTP请求头限制这几种字段(不得人为设置该集合之外的其他首部字段):

Accept、Accept-Language、Content-Language、Content-Type(需要注意额外的限制)、DPR、Downlink、Save-Data、Viewport-Width、Width

3.Content-type只能取:application/x-www-form-urlencoded、multipart/form-data、text/plain

4.请求中的任意XMLHttpRequestUpload 对象均没有注册任何事件监听器;XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问。

5.请求中没有使用 ReadableStream 对象。

非简单请求 会在正式通信之前,增加一次HTTP请求,称之为预检请求。浏览器会先发起OPTIONS方法到服务器,以获知服务器是否允许该实际请求。

-------------------------------------------------------------------------------------------------------

由此可知,若要我们的请求满足简单请求就可以避免发起OPTIONS请求了。

但是

1、我们系统请求中除了GET/POST还有PUT,DELETE,不能满足

2,我们系统有做业务模块权限,请求头里需要带有用户验证信息,第二点也不满足

3,我们的Content-Type绝大多数是application/json,还是不满足

然后只能寄希望于减少发起OPTIONS请求的次数,也就是说还是会用,但不是每次都用,查到的方法如下:

后端在请求的返回头部添加:

Access-Control-Max-Age:(number)  。数值代表preflight request  (预检请求)的返回结果(即 Access-Control-Allow-Methods 和Access-Control-Allow-Headers 提供的信息) 可以被缓存多久,单位是秒。

例如:将预检请求的结果缓存10分钟:

Access-Control-Max-Age: 600

不同浏览器有不同的上限。在Firefox中,上限是24h(即86400秒),而在Chromium 中则是10min(即600秒)。Chromium 同时规定了一个默认值 5 秒。
如果值为 -1,则表示禁用缓存,每一次请求都需要提供预检请求,即用OPTIONS请求进行检测。

Access-Control-Max-Age方法对完全一样的url的缓存设置生效,多一个参数也视为不同url。也就是说,如果设置了10分钟的缓存,在10分钟内,所有请求第一次会产生options请求,第二次以及第二次以后就只发送真正的请求了。

----------(#^.^#)希望有帮到大家(#^.^#)----------

【HTTP】如何避免OPTIONS请求?相关推荐

  1. 仅发送options请求,没有发送post解决方案

    仅发送options请求,没有发送post解决方案 参考文章: (1)仅发送options请求,没有发送post解决方案 (2)https://www.cnblogs.com/zhangzs000/p ...

  2. 使用axios时遇到的Request Method: OPTIONS请求,会同时发送两次请求问题

    新接手的一个项目中,发现一些接口在请求时,会自动发送一个 Request Method: OPTIONS 的请求,我查了一遍代码,不是代码中写明的.就上网搜了一下,网上给出的解释涉及到了两个关键词: ...

  3. corspost请求失败_vue项目CORS跨域请求500错误,post请求变options请求

    vue项目CORS跨域请求500,post请求变options请求,到底是什么情况. 提示:以下内容是一个非专业开发的我对跨域的理解,并不10分准确. 一.先介绍为什么明明发送的是Post请求,为什么 ...

  4. ios 请求头设置token_HTTP中的OPTIONS请求

    前言 http请求之前已经接触了很多,但是这个options请求我还是第一次,刚来到公司的时候进行调试,发现NetWork里,每个请求在发出之前都会先发送一个options请求,第二个才是正常的请求. ...

  5. java option请求_java – 如何说服spring 4.2将OPTIONS请求传递给控制器

    我们在控制器上使用带有@RestController注释的spring mvc,我们正在处理控制器中的授权.我们使用相同的代码来设置响应CORS飞行前请求的允许方法.为实现这一目标,我们有: 在调度程 ...

  6. Chrome不显示OPTIONS请求的解决方法2021版chrome90

    在chrome90上之前展示跨域请求预检请求的方法失效了: 在chrome地址栏总输入 chrome://flags/#out-of-blink-cors 将其设置为Disabled后重启浏览器 在c ...

  7. 服务器响应options,HTTP发送对OPTIONS请求的响应[C]

    在接收HTTP响应时出现Response is null错误. 我正在开发一个使用行套接字的示例小型HTTP服务器C.HTTP发送对OPTIONS请求的响应[C] 我的应用程序中实际上有2个服务器,一 ...

  8. 记一次 CORS 跨域请求出现 OPTIONS 请求的问题及解决方法

    记一次 CORS 跨域请求出现 OPTIONS 请求的问题及解决方法 参考文章: (1)记一次 CORS 跨域请求出现 OPTIONS 请求的问题及解决方法 (2)https://www.cnblog ...

  9. SpringBoot+Shiro放行OPTIONS请求,解决跨域问题

    问题: 集成shiro之后发现配置放行的接口可以正常访问,而需要登录验证的接口会报错 其中OPTIONS类型的接口会报302 导致后续的post请求报错提示跨域问题 Shiro登录流程 首先Shiro ...

  10. cURL(wget)—— 测试 RESTful 接口及模拟 GET/POST/PUT/DELETE/OPTIONS 请求

    cURL 是一个简单的 http 命令行工具.与最优秀的 Unix 工具一样,在设计之时,cURL 是个小型程序,功能十分专一,而且是故意为之,仅用于访问 http 服务器.(在 Linux 中,可以 ...

最新文章

  1. Linux LXC基本配置选项
  2. 【五线谱】五线谱的常用符号 ( 花连谱号 | 高音谱号 | 低音谱号 | 休止符 | 小节线 )
  3. 引用“.NET研究”类型赋值为null与加速垃圾回收
  4. python3.6使用chardet模块总是报错ValueError: Expected a bytes object, not a unicode object
  5. (chap2 简单的Http协议) HTTP性能优化之持久连接Keep Alive
  6. 《大数据算法》一1.2 大数据算法
  7. TCP相关的面试内容整理
  8. 不记得 Git 命令? 懒人版 Git 值得拥有!
  9. swift面向对象之方法
  10. teambition 还是jira_我用过的那些测试过程管理工具TAPD、Teambition、CODING
  11. 代码实现UITableViewCell表视图单元定制
  12. 冒泡排序c语言程序,冒泡排序(C语言实现)
  13. matlab生成pdf报告,MATLAB发布代码---生成文档pdf
  14. 华为手机如何换成鸿蒙,如何将自己的华为手机升级成鸿蒙系统
  15. 关于Django响应速度慢的问题
  16. H5纯页面方式手机端实现“扫一扫”功能(不是直接调起摄像头)
  17. 加密流量分析-2.研究背景
  18. JavaScript基础入门 封装DOM 连缀
  19. PTA 4 回溯法解整数拆分
  20. 代码随想录训练营day9

热门文章

  1. html+css+js基础内容(六)
  2. 字符串与Date类型相互转换
  3. SPICE二极管直流分析原理
  4. 团体程序设计天梯赛-练习集
  5. 用GRUB2来实现——坎特伯雷项目 The Canterbury Project
  6. matlab 保存当前图像,Matlab保存图像的方法总结
  7. VC++ IM即时通讯软件中的剪切板数据对通的实现细节(附源码)
  8. 制作个人网页过程(附源码)
  9. Muse UI — 基于 Vue2.0 的 Material Design UI 库
  10. 数据分析|数据分析如何做呢?