POST请求为什么会发送两次

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

你可能感兴趣的:(js,javascript,ajax,前端)