[前后端分离] 前端发送跨域API请求,每次访问会发送两次请求OPTIONS问题

最近在做前后端分离的项目,项目部署到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,本地不缓存,所以导致每次请求,都发预检测:

将Disable cache去掉即可。可以看到,只在第一次发送了OPTIONS预检测请求,后面请求,都正常发送一次了。

问题解决。

参考文章:https://my.oschina.net/mobinchao/blog/908834

CORS详解: http://www.ruanyifeng.com/blog/2016/04/cors.html

猜你喜欢

转载自blog.csdn.net/qq_26878363/article/details/100121356