在前端开发中，我们经常会遇到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-urlencoded）；
- Content-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选项，我们可以将某些特定的地址请求代理到线上服务器，从而解决跨域问题。开发服务器会在本地接收到请求后，将其转发到目标服务器，并将响应返回给前端。