解决前后端调用,跨域二次请求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
版权声明:本文为博主原创文章,转载请附上博文链接!
解决前后端调用,跨域二次请求Access-Control-Max-Age的更多相关文章
- nginx配置反向代理解决前后端分离跨域问题
摘自<AngularJS深度剖析与最佳实践>P132 nginx配置文件如下: server { listen ; server_name your.domain.name; locati ...
- nginx-springboot-vue前后端分离跨域配置
nginx-springboot-vue前后端分离跨域配置 引言 接着上篇--简单的springboot-vue前后端分离登录Session拦截的demo,其中跨域是通过springboot后端全局设 ...
- Nginx 解决WebApi跨域二次请求以及Vue单页面问题
一.前言 由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决方法(CORS实现)使用跨域处理方式处理而不用Jsonp的方式. 但是在一 ...
- nginx反向代理实现前后端分离&跨域问题
1.代理和跨域 1.1 正向代理 1)用户希望代理服务器帮助其和要访问服务器之间实现通信,需要: a.用户IP报文的目的IP=代理服务器IP: b.用户报文端口号=代理服务器监听端口号: c.HTTP ...
- 关于.Net Core 前后端分离跨域请求时 ajax并发请求导致部分无法通过验证解决办法。
项目中有这样一个页面.页面加载的时候会同时并发6个ajax请求去后端请求下拉框. 这样会导致每次都有1~2个“浏览器预请求”不通过. 浏览器为什么会自动发送“预请求”?请看以面连接 https://b ...
- Django前后端分离跨域请求问题
一.问题背景 之前使用django+vue进行前后端分离碰到跨域请求问题,跨域(域名或者端口不同)请求问题的本质是由于浏览器的同源策略导致的,当请求的响应不是处于同一个域名和端口下,浏览器不会接受响应 ...
- 前后端分离跨域 关于前后端分离开发环境下的跨域访问问题(angular proxy=>nginx )
前后端分离后遇到了跨域访问的问题: angular1中使用proxy很麻烦,最后还是失败结束:最后总结3种方法如下: 本人使用的第一种方法,只是开发环境下使用很方便! 1:禁掉谷歌的安全策略(Turn ...
- Java前后端的跨域问题
1 前端127.0.0.1:8888 2 后端127.0.0.1:8080 前端和后端因为来自不同的网域,所以在http的安全协议策略下,不信任 3 解决方案,在springmvc的控制层加入@Cro ...
- $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)
1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...
随机推荐
- Web前端—— JQuery迷你版实现以及使用
JQuery迷你版实现以及使用 tiny_jquery.js var $ = function (selector) { var ele = document.querySelector(select ...
- LabVIEW工控二进制数据存储
在文件存储的逻辑上,二进制文件基于值编码,而不是字符编码,其占用空间小,读取/写入速度快,但是译码比较复杂,不利用数据共享.根据具体编码方式的不同,二进制的使用方式也有所不同,如对bmp格式,规定了文 ...
- ASP.NET Core 使用 Redis 实现分布式缓存:Docker、IDistributedCache、StackExchangeRedis
ASP.NET Core 使用 Redis 实现分布式缓存:Docker.IDistributedCache.StackExchangeRedis 前提:一台 Linux 服务器.已安装 Docker ...
- element-admin中echarts图标宽度无法修改
默认示例 <template> <div> <el-row :gutter="0"> <el-col :xs="24" ...
- Flask笔记:信号机制
Flask中有内置的一些信号,也可以通过三方库blinker自定义信号,其实Flask内置的信号也是优先使用的blinker库,如果没有安装blinker才会使用自定义的信号机制.可以通过点击任意导入 ...
- Windows Store可以下载安装Windows Terminal (Preview)
Windows Terminal (Preview)已经可以在Windows Store下载安装. Windows Terminal (Preview)运行要求为: Windows 10 版本 183 ...
- Word模板注入攻击
Word模板注入攻击 0x00 工具准备 phishery:https://github.com/ryhanson/phishery/releases office版本:office 2010 0x0 ...
- 如果下载老版本的Xcode
打开:https://developer.apple.com/download/more/,选择符合自己的Xcode版本即可.
- ABP进阶教程11 - 小结
点这里进入ABP进阶教程目录 效果预览 至此,ABP进阶教程的查询/分页/排序/导出/打印示例已完成,效果如下 登录 首页 办公室信息 院系信息 课程信息 教职员信息 学生信息 新增 修改 删除 查询 ...
- [20190530]ORACLE 18c - ALTER SEQUENCE RESTART.txt
[20190530]ORACLE 18c - ALTER SEQUENCE RESTART.txt --//以前遇到要重置或者调整seq比较麻烦,我有时候采用比较粗暴的方式就是删除重建.--//18c ...