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

这篇具有很好参考价值的文章主要介绍了记录--post为什么会发送两次请求?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

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

在前段时间的一次面试中,被问到了一个如标题这样的问题。要想好好地去回答这个问题,这里牵扯到的知识点也是比较多的。

那么接下来这篇文章我们就一点一点开始引出这个问题。

同源策略

在浏览器中,内容是很开放的,任何资源都可以接入其中,如 JavaScript 文件、图片、音频 / 视频等资源,甚至可以下载其他站点的可执行文件。

但也不是说浏览器就是完全自由的,如果不加以控制,就会出现一些不可控的局面,例如会出现一些安全问题,如:

  • 跨站脚本攻击(XSS)
  • SQL 注入攻击
  • OS 命令注入攻击
  • HTTP 首部注入攻击
  • 跨站点请求伪造(CSRF)
  • 等等......

如果这些都没有限制的话,对于我们用户恶言,是相对危险的,因此需要一些安全策略来保障我们的隐私和数据安全。

这就引出了最基础、最核心的安全策略:同源策略。

什么是同源策略

同源策略是一个重要的安全策略,它用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。

如果两个 URL 的协议、主机和端口都相同,我们就称这两个 URL 同源。

  • 协议:协议是定义了数据如何在计算机内和之间进行交换的规则的系统,例如 HTTP、HTTPS。
  • 主机:是已连接到一个计算机网络的一台电子计算机或其他设备。网络主机可以向网络上的用户或其他节点提供信息资源、服务和应用。使用 TCP/IP 协议族参与网络的计算机也可称为 IP 主机。
  • 端口:主机是计算机到计算机之间的通信,那么端口就是进程到进程之间的通信。

如下表给出了与 URL http://store.company.com:80/dir/page.html 的源进行对比的示例:

URL 结果 原因
http://store.company.com:80/dir/page.html 同源 只有路径不同
http://store.company.com:80/dir/inner/another.html 同源 只有路径不同
https://store.company.com:80/secure.html 不同源 协议不同,HTTP 和 HTTPS
http://store.company.com:81/dir/etc.html 不同源 端口不同
http://news.company.com:80/dir/other.html 不同源 主机不同

同源策略主要表现在以下三个方面:DOM、Web 数据和网络。

  • DOM 访问限制:同源策略限制了网页脚本(如 JavaScript)访问其他源的 DOM。这意味着通过脚本无法直接访问跨源页面的 DOM 元素、属性或方法。这是为了防止恶意网站从其他网站窃取敏感信息。
  • Web 数据限制:同源策略也限制了从其他源加载的 Web 数据(例如 XMLHttpRequest 或 Fetch API)。在同源策略下,XMLHttpRequest 或 Fetch 请求只能发送到与当前网页具有相同源的目标。这有助于防止跨站点请求伪造(CSRF)等攻击。
  • 网络通信限制:同源策略还限制了跨源的网络通信。浏览器会阻止从一个源发出的请求获取来自其他源的响应。这样做是为了确保只有受信任的源能够与服务器进行通信,以避免恶意行为。

出于安全原因,浏览器限制从脚本内发起的跨源 HTTP 请求,XMLHttpRequest 和 Fetch API,只能从加载应用程序的同一个域请求 HTTP 资源,除非使用 CORS 头文件

CORS

对于浏览器限制这个词,要着重解释一下:不一定是浏览器限制了发起跨站请求,也可能是跨站请求可以正常发起,但是返回结果被浏览器拦截了。

例如,一个网页可能通过 AJAX 请求从另一个域的服务器获取数据。虽然某些情况下这样的请求可能会成功,但如果浏览器检测到请求返回的数据可能包含恶意代码或与同源策略冲突,浏览器可能会阻止网页访问返回的数据,以确保用户的安全。

跨源资源共享(Cross-Origin Resource Sharing,CORS)是一种机制,允许在受控的条件下,不同源的网页能够请求和共享资源。由于浏览器的同源策略限制了跨域请求,CORS 提供了一种方式来解决在 Web 应用中进行跨域数据交换的问题。

CORS 的基本思想是,服务器在响应中提供一个标头(HTTP 头),指示哪些源被允许访问资源。浏览器在发起跨域请求时会先发送一个预检请求(OPTIONS 请求)到服务器,服务器通过设置适当的 CORS 标头来指定是否允许跨域请求,并指定允许的请求源、方法、标头等信息。

简单请求

不会触发 CORS 预检请求。这样的请求为 简单请求,。若请求满足所有下述条件,则该请求可视为 简单请求

  1. HTTP 方法限制:只能使用 GET、HEAD、POST 这三种 HTTP 方法之一。如果请求使用了其他 HTTP 方法,就不再被视为简单请求。
  2. 自定义标头限制:请求的 HTTP 标头只能是以下几种常见的标头:AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type(仅限于 application/x-www-form-urlencodedmultipart/form-datatext/plain)。HTML 头部 header field 字段:DPR、Download、Save-Data、Viewport-Width、WIdth。如果请求使用了其他标头,同样不再被视为简单请求。
  3. 请求中没有使用 ReadableStream 对象。
  4. 不使用自定义请求标头:请求不能包含用户自定义的标头。
  5. 请求中的任意 XMLHttpRequestUpload 对象均没有注册任何事件监听器;XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问

预检请求

非简单请求的 CORS 请求,会在正式通信之前,增加一次 HTTP 查询请求,称为 预检请求

需预检的请求要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器,以获知服务器是否允许该实际请求。预检请求 的使用,可以避免跨域请求对服务器的用户数据产生未预期的影响。

例如我们在掘金上删除一条沸点:

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

它首先会发起一个预检请求,预检请求的头信息包括两个特殊字段:

  • Access-Control-Request-Method:该字段是必须的,用来列出浏览器的 CORS 请求会用到哪些 HTTP 方法,上例是 POST。
  • Access-Control-Request-Headers:该字段是一个逗号分隔的字符串,指定浏览器 CORS 请求会额外发送的头信息字段,上例是 content-type,x-secsdk-csrf-token
  • access-control-allow-origin:在上述例子中,表示 https://juejin.cn 可以请求数据,也可以设置为* 符号,表示统一任意跨源请求。
  • access-control-max-age:该字段可选,用来指定本次预检请求的有效期,单位为秒。上面结果中,有效期是 1 天(86408 秒),即允许缓存该条回应 1 天(86408 秒),在此期间,不用发出另一条预检请求。

一旦服务器通过了 预检请求,以后每次浏览器正常的 CORS 请求,就都跟简单请求一样,会有一个 Origin 头信息字段。服务器的回应,也都会有一个 Access-Control-Allow-Origin 头信息字段。

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

上面头信息中,Access-Control-Allow-Origin 字段是每次回应都必定包含的。

附带身份凭证的请求与通配符

在响应附带身份凭证的请求时:

  • 服务器不能将 Access-Control-Allow-Origin 的值设为通配符 *,而应将其设置为特定的域,如:Access-Control-Allow-Origin: https://example.com
  • 服务器不能将 Access-Control-Allow-Headers 的值设为通配符 *,而应将其设置为标头名称的列表,如:Access-Control-Allow-Headers: X-PINGOTHER, Content-Type。
  • 服务器不能将 Access-Control-Allow-Methods 的值设为通配符 *,而应将其设置为特定请求方法名称的列表,如:Access-Control-Allow-Methods: POST, GET。
  • 对于附带身份凭证的请求(通常是 Cookie),

这是因为请求的标头中携带了 Cookie 信息,如果 Access-Control-Allow-Origin 的值为 *,请求将会失败。而将 Access-Control-Allow-Origin 的值设置为 https://example.com,则请求将成功执行。

另外,响应标头中也携带了 Set-Cookie 字段,尝试对 Cookie 进行修改。如果操作失败,将会抛出异常。

参考文章

  • CORS 简单请求+预检请求(彻底理解跨域)
  • 跨域资源共享 CORS 详解
  • 跨源资源共享(CORS)

总结

预检请求是在进行跨域资源共享 CORS 时,由浏览器自动发起的一种 OPTIONS 请求。它的存在是为了保障安全,并允许服务器决定是否允许跨域请求。

跨域请求是指在浏览器中向不同域名、不同端口或不同协议的资源发送请求。出于安全原因,浏览器默认禁止跨域请求,只允许同源策略。而当网页需要进行跨域请求时,浏览器会自动发送一个预检请求,以确定是否服务器允许实际的跨域请求。

预检请求中包含了一些额外的头部信息,如 Origin 和 Access-Control-Request-Method 等,用于告知服务器实际请求的方法和来源。服务器收到预检请求后,可以根据这些头部信息,进行验证和授权判断。如果服务器认可该跨域请求,将返回一个包含 Access-Control-Allow-Origin 等头部信息的响应,浏览器才会继续发送实际的跨域请求。

使用预检请求机制可以有效地防范跨域请求带来的安全风险,保护用户数据和隐私。

整个完整的请求流程有如下图所示:

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

本文转载于:

https://juejin.cn/post/7269952188927017015

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录--post为什么会发送两次请求?文章来源地址https://www.toymoban.com/news/detail-664416.html

到了这里,关于记录--post为什么会发送两次请求?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 电脑开机为什么老是要两次?

    一、如果是新购的机器 有的人是新买没几天的机器,因为开始diY的时候忙着测试机器性能分数,装操作系统什么的,电脑老开着烤机,没发现这个问题。 等到一切安定下来后,才发现开机的故障。 这种问题,多半是你的电源跟主板或是显卡有冲突,或是供电不足造成的。

    2024年02月09日
    浏览(65)
  • TCP协议为什么要三次握手而不是两次?

    TCP(Transmission Control Protocol,传输控制协议)的历史可以追溯到1970年代初期,最初的版本是RFC 793,后来经过多次更新和改进,包括RFC 1122、RFC 1323、RFC 2018、RFC 2581、RFC 2873、RFC 3168和RFC 4614等。其中,RFC 1323(TCP Extensions for High Performance)提出了TCP的高性能扩展,RFC 2018(TCP Se

    2024年02月06日
    浏览(48)
  • TCP为什么要三次握手,而不是两次或四次?

    TCP连接时用于保证可靠性和流量控制维护的某些状态信息,这些信息的组合,包括 Socket,序列号和窗口大小 称为连接。 以上三个方面分析三次握手原因: 首要原因为了防止旧的重复连接初始化造成混乱 网络堵塞情况下,如果一个旧的SYN报文比新的SYN报文早到达了服务端,

    2023年04月26日
    浏览(94)
  • (学习笔记-TCP连接建立)TCP 为什么是三次握手?不是两次、四次?

    常规回答:“因为三次握手才能保证双方具有接收和发送的能力” 三次握手的 首要原因是为了防止旧的重复连接初始化造成混乱 。 假设:客户端先发送了SYN(seq=90)报文,然后客户端宕机了,而且这个SYN报文还被网络阻塞了,服务端并没有收到,接着客户端重启后,又重新向

    2024年02月17日
    浏览(46)
  • TCP实现原理和为什么需要三次握手?两次握手不可以?四次握手不可以?

    TCP实现原理和为什么需要三次握手?两次握手不可以?四次握手不可以? 1. 什么是TCP协议? TCP:Transmission Control Protocol翻译过来就是传输控制协议,TCP协议是一个面向连接的、可靠的、基于字节流的传输层协议 RFC 793对TCP连接的定义 Connections: The reliability and flow control mechanisms descri

    2024年02月16日
    浏览(48)
  • Elasticsearch 为什么能做到快速检索?秘密在这里!,Java全栈知识体系

    如果你了解 ES 应该知道,ES 可以说是对 Lucene 的一个封装,里面关于倒排索引的实现就是通过 lucene 这个 jar 包提供的 API 实现的,所以下面讲的关于倒排索引的内容实际上都是 lucene 里面的内容。 三、倒排索引 首先我们还不能忘了我们之前提的搜索需求,先看下建立倒排索引

    2024年04月12日
    浏览(46)
  • winform使用SetParent 嵌入excel,打开的excel跟随dpi 25%*125%缩放了两次,目前微软官方没有好的解决方案,为什么

    双重缩放问题在将 Excel 嵌入到 WinForm 中时确实可能会出现,这是因为两个不同的应用程序(WinForm 和 Excel)之间的 DPI 缩放逻辑不一致,导致双重缩放的结果。 在 Windows 操作系统中,DPI 缩放是一种全局的设置,用于适应高 DPI 显示设备,从而提高显示元素的大小。当您将 Ex

    2024年02月14日
    浏览(46)
  • 为什么要禁止除GET和POST之外的HTTP方法

    一, HTTP请求有哪些 GET和POST是最为常见方法,而且大部分主流网站只支持这两种方法,因为它们已经可以满足功能需求。 GET获取服务器资源 POST用来像服务器指定的URL的资源提交数据。 其余方法一般服务器不会响应,并抛出404或405. 二, 不安全的HTTP方法 OPTION方法:允许客户

    2024年02月03日
    浏览(38)
  • 面试题:为什么要合并 HTTP 请求?有什么好处?

    为什么要实现batch call? - 减少网络中的传输损耗 - 如何减少的? - 通过合并HTTP请求 - 合并HTTP请求是如何减少网络损耗的? 本文将解决这个问题。一起看看单个请求携载大量信息和多个请求携载小量信息对于整个时间的影响。 可以保持长连接,但是每个不同的请求之间,clien

    2024年01月19日
    浏览(46)
  • 你用过猿如意吗?猿如意可以使用ChatGPT哦,这里详细介绍了猿如意的功能,为什么我建议你使用猿如意,来看看吧

    你是否还在为为每次安装IDE(集成开发工具)要去各种网站找教程而烦恼? 你是否还在为各种文本格式转换而头痛? 你是否在为斗图都不过兄弟们而卑微? 你是否在为互联网中庞大冗杂却低效的教程文档而崩溃? 你想不想有一个关于代码的模板库? 你想不想不用\\\"科技\\\"就使

    2023年04月13日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包