最近在做前后端分离的项目,项目部署到azure后,发现前端访问后端API的时候,每次都会发送两次请求
第一次是OPTIONS的请求,然后才是正常的请求,。这个问题十分有意思。
查阅资料得到的结论是:
第一个OPTIONS的请求是由Web服务器处理跨域访问引发的。
OPTIONS是一种“预检请求”,浏览器在处理跨域访问的请求时如果判断请求为复杂请求,则会先向服务器发送一条预检请求,根据服务器返回的内容浏览器判断服务器是否允许该请求访问。如果web服务器采用cors的方式支持跨域访问,在处理复杂请求时这个预检请求是不可避免的。
一句话概括:因为我们公司的access token通过header传递所以导致了浏览器判断该请求是复杂请求,所以要先通过OPTIONS请求进行预检查。
解决方法
方法一:SpringBoot项目配置方式:
设置Access-Control-Max-Age(指定本次预检请求的有效期,单位秒)
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // **代表所有路径
.allowedOrigins("*") // allowOrigin指可以通过的ip,*代表所有,可以使用指定的ip,多个的话可以用逗号分隔,默认为*
.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE") // 指请求方式 默认为*
.maxAge(3600L) // 准备响应前的 缓存持续的 最大时间
.allowCredentials(true); // 支持证书,默认为true
}
方法二:Nginx配置方式:
nginx配置增加
#设置一天的过期时间
add_header Access-Control-Max-Age 86400;
如果你设置完了之后,发现并没有生效,还是请求两次,不要慌,这个是你浏览器设置的问题:
因为你开了Disable cache,本地不缓存,所以导致每次请求,都发预检测:
扫描二维码关注公众号,回复:
13118148 查看本文章
将Disable cache去掉即可。可以看到,只在第一次发送了OPTIONS预检测请求,后面请求,都正常发送一次了。
问题解决。