前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >post为什么会发送两次请求?

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

原创
作者头像
星辰大海c
发布2023-11-28 23:24:51
8500
发布2023-11-28 23:24:51
举报
文章被收录于专栏:前端学习教程

跨域POST,浏览器会先发送一个OPTIONS预请求,目的是与服务器确认是否允许实际的跨域请求,确认后再发实际POST请求。

详细描述如下:

跨域请求的预检:当使用 XMLHttpRequest 或 Fetch API 发送跨域请求(即请求目标与当前页面的域名、协议或端口不同)时,浏览器会先发送一个 OPTIONS 请求来检查目标服务器是否支持跨域请求。这个 OPTIONS 请求被称为预检请求,用于获取服务器对跨域请求的支持信息。预检请求的目的是确保跨域请求的安全性,以防止潜在的安全风险。因此,在这种情况下,会看到两次请求,其中一次是预检请求,另一次是实际的请求。

跨域请求:当你的前端应用在一个域名下发起跨域请求(即请求目标不在同一个域名下)时,浏览器会自动发送一个 OPTIONS 预请求来检查是否允许跨域请求。这是跨域资源共享(CORS)机制的一部分,用于确认服务器是否支持跨域请求。

复杂请求:当浏览器检测到一个跨域请求是 "复杂请求" 时,会发送 OPTIONS 预请求。复杂请求是指那些不仅仅是简单 GET 或 POST 请求的请求,例如使用自定义标头(Custom Headers)或非标准 HTTP 方法(如PUT、DELETE)的请求。浏览器通过 OPTIONS 请求来获取服务器的支持信息,以确定是否可以继续发送实际的请求。

自定义的前端请求:你的前端应用可能会发送自定义的 HTTP 请求,这些请求可能需要进行预检查,以确保服务器支持并允许它们。这种情况下,浏览器会发送 OPTIONS 请求来验证服务器的支持。

手动设置的 OPTIONS 请求:有时,你可能会手动发送 OPTIONS 请求来检查服务器的支持或执行其他特定操作。这通常是在开发或测试过程中使用的,以确保服务器的预期行为。

总之,OPTIONS 预请求通常在涉及跨域请求、复杂请求、自定义请求或手动触发的情况下发生,用于检查服务器的支持和确定是否可以继续发送实际的 HTTP 请求。它是浏览器安全机制和跨域资源共享(CORS)规范的一部分。

为什么post和put之类的请求会有两次请求没有突出来,为什么浏览器会默认将POST,PUT定义为复杂请求的原因,我来补充下吧:

浏览器限制跨域请求一般有两种方式:

  1. 浏览器限制发起跨域请求
  2. 跨域请求可以正常发起,但是返回的结果被浏览器拦截了

一般浏览器都是第二种方式限制跨域请求,那就是说请求已到达服务器,并有可能对数据库里的数据进行了操作,但是返回的结果被浏览器拦截了,那么我们就获取不到返回结果,这是一次失败的请求,但是可能对数据库里的数据产生了影响。

Get请求一般是查询数据,不会差生副作用,但是Post,Put之类的请求是会产生副作用,所以被浏览器定义为复杂请求,必须限制限制发起跨域请求,避免产生数据修改的副作用风险。

为了防止这种情况的发生,规范要求,对这种可能对服务器数据产生副作用的HTTP请求方法,浏览器必须先使用OPTIONS方法发起一个预检请求,从而获知服务器是否允许该跨域请求:如果允许,就发送带数据的真实请求;如果不允许,则阻止发送带数据的真实请求,这是上面说的第一种限制发起跨域的方式。

post默认情况下是简单请求,前提是请求头Content-Type是一下之一的时候application/x-www-form-urlencoded、multipart/form-data、text/plain,我们常用的application/json的时候是复杂请求。

我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
数据库
云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档