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

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-datatext/plain)。
  • 将CORS策略配置为允许跨域请求而不需要预检。

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

相关推荐
GIS程序媛—椰子9 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_00115 分钟前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端18 分钟前
Content Security Policy (CSP)
前端·javascript·面试
木舟100922 分钟前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤439132 分钟前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安1 小时前
前端第二次作业
前端·css·css3
啦啦右一1 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
半开半落1 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt