招聘网站开发实训报告,网页设计代码模板代码,Wordpress校内优化,百度商城在前端开发中#xff0c;我们经常会遇到POST请求会发送两次的情况。这种问题可能会导致数据错误或其他意料之外的结果#xff0c;让开发者感到困惑和不安。本文将深入探讨POST请求为何会发送两次的原因#xff0c;并从以下几个方面进行解释#xff1a;同源策略、简单请求、… 在前端开发中我们经常会遇到POST请求会发送两次的情况。这种问题可能会导致数据错误或其他意料之外的结果让开发者感到困惑和不安。本文将深入探讨POST请求为何会发送两次的原因并从以下几个方面进行解释同源策略、简单请求、预检请求、为什么本地使用Webpack进行dev开发时不需要服务器端配置CORS的情况下访问到线上接口。
1.同源策略 同源策略是一种浏览器的安全机制它要求Web应用程序只能与同一来源协议、主机名和端口的资源进行交互。如果两个不同的网站拥有相同的来源则它们可以相互交互。同源策略的目的是保护用户隐私和安全防止恶意代码攻击用户的信息。 同源策略限制了跨域请求即不能向不同源的服务器发送请求。但是同源策略并不适用于所有类型的请求下面我们将介绍简单请求和预检请求。
2.简单请求 不会触发 CORS 预检请求为简单请求。简单请求是指满足以下条件的请求
使用GET、HEAD或POST方法之一请求头部信息只包含以下字段Accept、Accept-Language、Content-Language、Content-Type仅限于以下三种MIME类型text/plain、multipart/form-data或application/x-www-form-urlencodedContent-Type字段的值必须是以下三种之一text/plain、multipart/form-data或application/x-www-form-urlencoded。 对于简单请求浏览器会直接向服务器发送请求不会进行预检请求。简单请求不会引起两次请求的问题。
3.预检请求 当请求不满足简单请求的条件时浏览器将发起预检请求。预检请求是在实际请求之前发送的OPTIONS请求用于获取服务器是否支持跨域访问。预检请求包含以下头部信息
Access-Control-Request-Method表示实际请求所使用的方法Access-Control-Request-Headers表示实际请求所携带的自定义头部信息。 access-control-allow-origin可以是具体的源也可以设置为* 符号表示统一任意跨源请求。 access-control-max-age该字段可选用来指定本次预检请求的有效期单位为秒。比如有效期1 天86408 秒即允许缓存该条回应 1 天86408 秒在此期间不用发出另一条预检请求。 一旦服务器通过了 预检请求以后每次浏览器正常的 CORS 请求就都跟简单请求一样会有一个 Origin 头信息字段。服务器的回应也都会有一个 Access-Control-Allow-Origin 头信息字段。预检请求的目的是确保服务器支持跨域请求并且允许浏览器发送实际请求。如果服务器允许跨域访问则返回带有Access-Control-Allow-Origin头部信息的响应。否则浏览器将阻止实际请求的发送。
4.为什么本地开发时不需要服务器端配置CORS的情况下访问到线上接口 Webpack是一个流行的JavaScript模块打包工具它可以将多个JavaScript文件打包成一个或多个捆绑包。在开发过程中我们通常会使用Webpack的开发服务器来提供本地的开发环境。Webpack的开发服务器具有反向代理功能可以解决跨域问题。 当我们使用Webpack开发服务器发送POST请求到线上接口时请求实际上是由Webpack的开发服务器发送的。Webpack的开发服务器提供了反向代理功能它可以将请求代理到目标服务器上。通过配置Webpack的devServer.proxy选项我们可以将某些特定的地址请求代理到线上服务器从而解决跨域问题。开发服务器会在本地接收到请求后将其转发到目标服务器并将响应返回给前端。
