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。