最近在用uni-app开发项目时,发现一个之前没注意到的点,当我发送POST请求的时候,在NetWork可以看到在发送正式的POST请求时,会先发送一个OPTIONS请求,OPTIONS请求后才会发送真正的POST请求

这其实是浏览器对复杂跨域请求的一种处理方式,在真正发送请求之前,会先进行一次OPTIONS预请求,以确定服务器响应是否正确,是否能接受真正的请求,如果在options请求之后获取到的响应是拒绝性质的,例如500等http状态,那么它就会停止第二次的真正请求的访问。

其实最终是因为浏览器对简单跨域请求和复杂跨域请求的处理区别

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

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

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

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

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

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

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

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

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

.请求中没有使用 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请求,第二次以及第二次以后就只发送真正的请求了。

转载自:https://blog.csdn.net/xiaoxiong_jiaxin/article/details/88060663

请求时发送OPTIONS请求的更多相关文章

  1. ajax跨域POST时执行OPTIONS请求服务端返回403forbidden的解决方法

    ajax访问服务端restful api时,由于contentType类型的原因,浏览器会先发送OPTIONS请求. 本人服务端用的是spring mvc框架,web服务器用的是tomcat的,以下给 ...

  2. http跨域时的options请求

    1.背景 在前后端分离的项目中经常会遇到跨域请求的问题,如果没有进行跨域配置,会浏览器请求失败.我一般采用两种解决方案: 1.采用nginx进行转发,是前后端服务处于同一个域下面,从根本上避免跨域问题 ...

  3. AJAX请求中出现OPTIONS请求

    背景 有一个前后端分离的VUE项目来发送ajax请求, 查看Nginx日志或使用Chrome Dev Tools查看请求发送情况时, 会看到每次调后台API的请求之前, 都会发送一个OPTIONS请求 ...

  4. 关于.Net Core 前后端分离跨域请求时 ajax并发请求导致部分无法通过验证解决办法。

    项目中有这样一个页面.页面加载的时候会同时并发6个ajax请求去后端请求下拉框. 这样会导致每次都有1~2个“浏览器预请求”不通过. 浏览器为什么会自动发送“预请求”?请看以面连接 https://b ...

  5. 服务网关ZuulFilter过滤器--如何解决跨域请求中的OPTIONS请求

    进行跨域请求的时候,并且请求头中有额外参数,比如token,客户端会先发送一个OPTIONS请求 来探测后续需要发起的跨域POST请求是否安全可接受 所以这个请求就不需要拦截,下面是处理方式 @Ove ...

  6. Vue--axios:vue中的ajax异步请求(发送和请求数据)、vue-resource异步请求和跨域

    跨域原理: 一.使用axios发送get请求 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 & ...

  7. js 中ajax请求时设置 http请求头中的x-requestd-with= ajax

    今天发现 AngularJS 框架的$http服务提供的$http.get() /$http.post()的ajax请求中没有带 x-requested-with字段. 这样的话,后端的php 就无法 ...

  8. http流请求时,被请求站点HttpContext.Current为null?

    我负责运维一个短信接口站点sms.调用上游短信供应商下发短信后,他们会给我们推送发送报告.报告是类似DELIVRD.DI:9432这样的码.为了方便识别,系统里有一个报告码与其描述的关系,一开始是写死 ...

  9. http请求方法之options请求方法

    需预检的请求”要求必须首先使用 OPTIONS   方法发起一个预检请求到服务器,以获知服务器是否允许该实际请求. https://developer.mozilla.org/zh-CN/docs/W ...

随机推荐

  1. Http协议 & Servlet

    Http协议&Servlet Http协议 什么是协议 双方在交互.通讯的时候遵守的一种规范.规则. http协议 针对网络上的客户端与服务器端在执行http请求的时候,遵守的一种规范.其实就 ...

  2. WinForm GroupBox控件重绘外观

    private void groupBoxFun_Paint(PaintEventArgs e, GroupBox groupBox){ e.Graphics.Clear(groupBox.BackC ...

  3. Java8 Stream —— 更丝滑的集合操作方式

    一.概念 Stream是一种可供流式操作的数据视图有些类似数据库中视图的概念它不改变源数据集合如果对其进行改变的操作它会返回一个新的数据集合. 总的来讲它有三大特性:在之后我们会对照着详细说明     ...

  4. 《Dotnet9》系列-开源C# Winform控件库强力推荐

    时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...

  5. 批量SSH key-gen无密码登陆认证脚本

    SSH key-gen无密码登录认证脚本 使用为了让linux之间使用ssh不需要密码,可以采用了数字签名RSA或者DSA来完成.主要使用ssh-key-gen实现. 通过 ssh-key-gen 来 ...

  6. 解决 Windows Docker 安装 Gitlab Volume 权限问题

    本文首发于我的个人博客,解决 Windows Docker 安装 Gitlab Volume 权限问题 ,欢迎访问! 记录一下 Windows10 下 Docker 安装 Gitlab 的步骤. Ca ...

  7. python安装pymssql等包时出现microsoft visual c++ 14.0 is required问题无需下载visualcppbuildtools的解决办法

    如题,在练习python安装一些包时,出现了microsoft visual c++ 14.0 is required问题.网上有很多资料:一是下载对应的.whl文件,然后pip install安装: ...

  8. 使用Advanced Installer打包工具如何设置是否安装预安装程序包

    要保证我们的程序能在目标机器上正常运行,便需要保证目标机器上提供了程序运行的必要组件. 而在使用Advanced Installer打包工具制作程序安装包时,我们可以通过配置“需求-运行环境-程序包- ...

  9. oop面向对象【继承、super、this、抽象类】

    今日内容 1.三大特性——继承 2.方法重写 3.super关键字 4.this关键字 5.抽象类 教学目标 1.能够解释类名作为参数和返回值类型 2.能够写出类的继承格式 3.能够说出继承的特点 4 ...

  10. .NET 收徒,带你走向架构师。

    最近感悟天命,偶有所得,故而打算收徒若干,以继吾之传承. 有缘者,可破瓶颈,走向架构师之峰,指日可待. 入门基本要求: 1.工作经验:1年或以上. 2.入门费用:10000元(RMB). 联系方式(联 ...