前端post提交一次会有两次请求?

 1 问题:前端post只提交一次会有两次请求?

前端post只提交一次会有两次请求?如下图:     

       这里是执行了两次post提交,每个post都有两次(一次是preflight以options方式,一次是xhr,原本post),这与浏览器的跨域资源共享(CORS)策略有关,每一次类型preflight是浏览器自动发起的options请求,不可以直接控制,但可以通过服务端配置的方式向浏览器缓存允许直接请求,只需配置适当的Access-Control-Max-Age头即可解决。

2 设置后端代码,避免预检请求

以springboot后端代码示例:

@Configuration
public class WebConfiguration implements WebMvcConfigurer {


    private CorsConfiguration corsConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        List<String> list = new ArrayList<>();
        list.add("*");
        corsConfiguration.setAllowedOrigins(list);
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setMaxAge(3600L); 

        return corsConfiguration;
    }
}

配置后测试再也没有发现preflight以options方式的请求,如下图

 

3 不设置后端,避免预检请求?

   如果你想避免预检请求,可以尝试以下方法:

  • 使用简单的HTTP方法(如GET或POST,但不包括自定义头部)。
  • 避免使用非简单的请求头(如Content-Type必须是application/x-www-form-urlencoded, multipart/form-datatext/plain)。
  • 将CORS策略配置为允许跨域请求而不需要预检。

总结来说,浏览器会为了安全性,在跨域请求时先发出预检请求,确保目标服务器允许跨域访问,然后才进行实际的POST请求。这就是为什么会有两次请求,一次是preflight,一次是xhr。

相关推荐

  1. POST请求为什么发送

    2024-07-21 15:36:04       60 阅读
  2. Web 中POST为什么发送请求

    2024-07-21 15:36:04       22 阅读
  3. POST请求查询参数神奇失效的神奇bug之旅

    2024-07-21 15:36:04       14 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-21 15:36:04       52 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-21 15:36:04       54 阅读
  3. 在Django里面运行非项目文件

    2024-07-21 15:36:04       45 阅读
  4. Python语言-面向对象

    2024-07-21 15:36:04       55 阅读

热门阅读

  1. B3635 硬币问题 洛谷 源代码

    2024-07-21 15:36:04       14 阅读
  2. 配置文件格式 INI 快速上手

    2024-07-21 15:36:04       20 阅读
  3. 网站工作原理详解

    2024-07-21 15:36:04       19 阅读
  4. 【Golang】你真的学会切片了吗?

    2024-07-21 15:36:04       17 阅读
  5. Emacs vs IDE:用Emacs写程序真的更方便吗?

    2024-07-21 15:36:04       19 阅读
  6. libevent版本和日志相关接口

    2024-07-21 15:36:04       18 阅读
  7. 编写一款2D CAD/CAM软件(二十一)生产ASCII ART Logo

    2024-07-21 15:36:04       16 阅读