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

qyhua2024-07-21 15:18

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

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

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

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

以springboot后端代码示例：

java 复制代码

@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-data或text/plain）。
将CORS策略配置为允许跨域请求而不需要预检。

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