解决前后端调用,跨域二次请求Access-Control-Max-Age

发现前后端分离的项目中,前端发起一个请求到后端,在Chrome浏览器下面debug的时候,Network下面看到同一个url有两条请求,url有两条请求,第一条请求的Method为OPTIONS,第二条请求的Method才是真正的Get或者Post,并且,第一条请求无数据返回,第二条请求才返回正常的数据,我们的整个后台解决跨域问题是用CORS实现的,后来查资料发现原因:

第一个OPTIONS的请求是由WEB服务器处理跨域访问引发的。OPTIONS是一种预检请求,浏览器在处理跨域访问的请求时,如果判断请求为复杂请求,则会先向服务器发送一条预检请求,根据服务器返回的内容,浏览器判断服务器是否允许访问该请求。如果WEB服务器采用CORS的方式支持跨域访问,在处理复杂请求时这个预检请求是不可避免的。

由于我们的WEB服务器采用CORS来解决跨域访问的问题,同时在header中添加了自定义参数以及使用json格式来进行数据交互,导致我们的每次请求都是复杂请求,从而产生每次请求都会发送两条请求的现象。

产生原因如下:

使用CORS解决跨域问题

解决方案:
配置Nginx, 加入”Access-Control-Max-Age”,用来指定本次预检请求的有效期,单位为秒。上面结果中,有效期是20天(1728000秒),即允许缓存该条回应1728000秒(即20天),在此期间,不用发出另一条预检请求

location /wechat/ {
add_header ‘Access-Control-Max-Age’ 1728000;
proxy_pass http://wechat/rest/;
}

在nginx下面加入Access-Control-Max-Age,如果你的Chrome浏览器在debug状态,勾选上Disable cache,也是失效的
---------------------
作者:Java-Basketball
来源:CSDN
原文:https://blog.csdn.net/superdangbo/article/details/82685694
版权声明:本文为博主原创文章,转载请附上博文链接!

原文地址:https://www.cnblogs.com/JAYIT/p/10938057.html