post为什么会发送两次请求?

简介: post为什么会发送两次请求?

首先,得明白啥是POST请求。POST请求就是咱们在网上干点啥事儿,比如提交个表单、上传个文件啥的,得跟服务器说:“嘿,我这儿有点东西,你给我处理一下。”这时候,浏览器就会发个POST请求给服务器。那么,为啥有时候会发两次呢?这其实跟浏览器的“预检”机制有关系。简单来说,就是浏览器在正式发请求之前,会先问问服务器:“嘿,我要发请求了,你准备好了吗?能接收吗?”这个过程就叫做“预检请求”,也叫OPTIONS请求。为啥要有这个预检呢?因为有时候咱们发的请求可能比较复杂,比如请求头里面带了点特殊的东西,或者请求方法是PUT、DELETE这种不常用的。这时候,浏览器就会有点担心,怕服务器不理解或者不接受这个请求,所以就先发个简单的OPTIONS请求去问问。如果服务器说:“没问题,你来吧!”那浏览器就会再发一次正式的POST请求。所以,咱们就看到了两次请求:一次是预检的OPTIONS请求,一次是正式的POST请求。那么,举个实际的例子来说明一下。假设你正在开发一个网页应用,其中有一个功能是让用户能够上传图片。当用户选择了一张图片并点击上传按钮时,浏览器就会发送一个POST请求到服务器,以便将图片上传到服务器上。但是,如果这个请求中包含了一些特殊的请求头,比如自定义的X-Requested-With头,或者请求的内容类型(Content-Type)不是常见的application/x-www-form-urlencoded、multipart/form-data或text/plain,那么浏览器就会先发送一个OPTIONS请求进行预检。这个OPTIONS请求会询问服务器是否接受这种类型的请求。如果服务器响应说可以接受,那么浏览器才会继续发送正式的POST请求,将图片上传到服务器上。预检请求和正式请求之间有一些明显的区别。首先,它们的目的不同。预检请求的目的是询问服务器是否接受某种类型的请求,而正式请求则是实际执行某种操作,比如上传文件、提交表单等。其次,它们的请求方法不同。预检请求总是使用OPTIONS方法,而正式请求则可以使用GET、POST、PUT、DELETE等方法。最后,它们的请求头和请求体也可能不同。预检请求通常只包含一些基本的请求头,而正式请求则可能包含更多的请求头和请求体数据。所以,先总结一下,POST请求有时候会发送两次,是因为浏览器为了保险起见,先发个预检请求去问问服务器:“我能发这个请求吗?”得到允许后,再发正式的请求。这样,就能确保咱们的请求能够顺利到达服务器,并得到正确的处理了。好了,现在大家明白了吧,以后面试遇到这个问题就可以很好的回答清楚了,说白了不是发送两次post请求,而是在一些特殊的情况下,如果post请求要带一些特殊的请求头,平时不太常见,浏览器就会发担心服务端没法接收和处理,那如果服务端没法处理,自己何必还发送post请求携带大量的表单数据、文件数据、图片数据过去呢?这不是吃饱了没事干么,对吧!所以此时才会先发个options预检请求过去,带一些请求头,问一下服务端后面能不能处理正式的请求。另外的话,对于发options预检请求的情况还有一种比较特殊的,就是同源策略下的跨域访问,这个也是有可能会提前发options预检请求的。浏览器的同源策略,简单来说,就是浏览器为了安全起见,设置的一个规矩。这个规矩规定,来自不同源的网页之间不能直接进行交互。这里的“源”指的是协议(比如http或https)、域名(比如www.example.com)和端口号(比如80或443)这三者的组合。只要这三者中有任何一个不同,就认为是不同的源。那不同的源肯定不能互相瞎请求啊,比如说浏览器请求服务器A返回了一个网页,结果这个服务器A跑的A系统的网页里,有一个请求要去请求服务器B上部署的B系统,那这种就很奇怪了,对浏览器来说你们是两个服务器,也就是两个不同的系统,干什么要互相瞎访问,有没有可能A系统是一个涉灰系统在搞破坏,盗取数据,对不对?举个日常的例子,就像你有两个家,一个在北京,一个在上海。虽然都是你的家,但因为地理位置不同(就像协议、域名、端口号不同),所以你不能直接从北京的家跑到上海的家去拿东西,除非你走特殊通道(就像跨域资源共享CORS)。那CORS的话,全称是跨域资源共享(Cross-Origin Resource Sharing),是浏览器和服务器之间的一种约定,用来解决跨域请求的问题。简单来说,CORS就是一种机制,让服务器告诉浏览器:“嘿,这个网页虽然来自不同的源,但它是安全的,你可以让它访问我的资源。”就是说服务器A的网页里的JS代码去请求服务器B了,那就是跨域了,那跨域发起的请求就是CORS请求了。那浏览器发跨域请求的时候,会不回发options预检请求呢?其实也是会的,因为当浏览器发起跨域请求时,并不是所有的请求都会直接发送。有时候,浏览器也是会先发出一个OPTIONS请求,这个请求就像是浏览器在问服务器:“嘿,我这儿有一个网页想发个请求到你的地盘,但是网页和你的话,咱俩不是同一个源的,你得先告诉我,你同不同意?”这个过程就叫做跨域请求之前的预检请求。那么,跨域请求的时候,什么情况下会发出OPTIONS预检请求呢?主要有以下几种情况:1、请求方法不是GET、HEAD、POST:因为GET、HEAD、POST这三种方法被认为是“简单”的,通常不会对服务器造成太大影响,所以浏览器会直接发送请求。但如果是PUT、DELETE等方法,浏览器就会先发个OPTIONS请求问问,就怕有人要搞破坏。对于GET、HEAD、POST这种简单请求,浏览器是没有预检请求的,他会直接发送请求到服务器,并在请求头中包含一个Origin字段,表明这个请求的来源。服务器收到请求后,会根据请求头中的Origin字段来决定是否允许这个跨域请求。如果允许,服务器会在响应头中包含Access-Control-Allow-Origin字段,并返回相应的资源。但是大部分情况下,很多后端系统如果用的是MVC框架的话,都会默认禁止CORS跨域请求,所以这个时候如果你发现后端系统异常了,配置一下MVC框架,打开CORS跨域请求支持就可以了,那就可以处理跨域请求了。2、请求头包含了自定义字段:比如你在请求头里加了个X-Token,浏览器就会觉得:“咦,这个请求头看起来不简单,我得先问问服务器同不同意。”3、Content-Type不是常见的三种类型:常见的Content-Type有application/x-www-form-urlencoded、multipart/form-data和text/plain。如果你用了其他类型,比如application/json,浏览器也会先发个OPTIONS请求。再总结一下,当浏览器觉得一个跨域请求“不简单”时,就会先发个OPTIONS请求去预检一下,看看服务器同不同意。如果服务器同意了,浏览器才会继续发送正式的请求。这就像你去别人家做客,如果不是很熟,你可能会先打个电话问问对方方不方便,得到同意后再去。

目录
相关文章
|
SQL Java 数据库连接
MyBatis【源码探究 01】mapper.xml文件内<if test>标签判断参数值不等于null和空(当参数值为0)时筛选条件失效原因分析
MyBatis【源码探究 01】mapper.xml文件内<if test>标签判断参数值不等于null和空(当参数值为0)时筛选条件失效原因分析
1313 0
MyBatis【源码探究 01】mapper.xml文件内<if test>标签判断参数值不等于null和空(当参数值为0)时筛选条件失效原因分析
|
8月前
|
存储 弹性计算 安全
阿里云弹性计算_通用计算专场精华概览 | 2024云栖大会回顾
本次专场内容包括阿里云弹性计算全新发布的产品家族、阿里云第9代 ECS 企业级实例、CIPU 2.0技术解读、E-HPC+超算融合、倚天云原生算力解析等内容,并发布了国内首个云超算国家标准。
|
网络虚拟化
|
10月前
|
缓存 安全 JavaScript
技术分享:探索POST请求为何会发送两次的奥秘
【8月更文挑战第20天】在Web开发过程中,遇到POST请求被意外发送两次的情况并不罕见。这一现象不仅影响用户体验,还可能对服务器造成不必要的负担。本文将从多个维度深入剖析POST请求为何会发送两次,并分享相应的解决方案,助力开发者在日常工作中有效应对此类问题。
399 0
|
9月前
|
缓存 前端开发 JavaScript
终极 Nginx 配置指南(全网最详细)
本文详细介绍了Nginx配置文件`nginx.conf`的基本结构及其优化方法。首先通过删除注释简化了原始配置,使其更易理解。接着,文章将`nginx.conf`分为全局块、events块和http块三部分进行详细解析,帮助读者更好地掌握其功能与配置。此外,还介绍了如何通过简单修改实现网站上线,并提供了Nginx的优化技巧,包括解决前端History模式下的404问题、配置反向代理、开启gzip压缩、设置维护页面、在同一IP上部署多个网站以及实现动静分离等。最后,附上了Nginx的基础命令,如安装、启动、重启和关闭等操作,方便读者实践应用。
4242 85
终极 Nginx 配置指南(全网最详细)
|
存储 缓存 JSON
详解HTTP四种请求:POST、GET、DELETE、PUT
【4月更文挑战第3天】
54334 3
详解HTTP四种请求:POST、GET、DELETE、PUT
|
10月前
|
XML 前端开发 Java
Spring MVC接收param参数(直接接收、注解接收、集合接收、实体接收)
Spring MVC提供了灵活多样的参数接收方式,可以满足各种不同场景下的需求。了解并熟练运用这些基本的参数接收技巧,可以使得Web应用的开发更加方便、高效。同时,也是提高代码的可读性和维护性的关键所在。在实际开发过程中,根据具体需求选择最合适的参数接收方式,能够有效提升开发效率和应用性能。
363 2
|
11月前
|
JSON 分布式计算 大数据
MaxCompute产品使用合集之如何解析嵌套的JSON数据
MaxCompute作为一款全面的大数据处理平台,广泛应用于各类大数据分析、数据挖掘、BI及机器学习场景。掌握其核心功能、熟练操作流程、遵循最佳实践,可以帮助用户高效、安全地管理和利用海量数据。以下是一个关于MaxCompute产品使用的合集,涵盖了其核心功能、应用场景、操作流程以及最佳实践等内容。
351 0
|
JSON 分布式计算 大数据
MaxCompute产品使用合集之大数据计算MaxCompute 要提取JSON字符串中的所有key-value对,我该怎么操作
MaxCompute作为一款全面的大数据处理平台,广泛应用于各类大数据分析、数据挖掘、BI及机器学习场景。掌握其核心功能、熟练操作流程、遵循最佳实践,可以帮助用户高效、安全地管理和利用海量数据。以下是一个关于MaxCompute产品使用的合集,涵盖了其核心功能、应用场景、操作流程以及最佳实践等内容。
|
JavaScript
v-model和:model的区别
v-model和:model的区别
413 0