发现前后端分离的项目中,前端发起一个请求到后端,在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的更多相关文章

  1. nginx配置反向代理解决前后端分离跨域问题

    摘自<AngularJS深度剖析与最佳实践>P132 nginx配置文件如下: server { listen ; server_name your.domain.name; locati ...

  2. nginx-springboot-vue前后端分离跨域配置

    nginx-springboot-vue前后端分离跨域配置 引言 接着上篇--简单的springboot-vue前后端分离登录Session拦截的demo,其中跨域是通过springboot后端全局设 ...

  3. Nginx 解决WebApi跨域二次请求以及Vue单页面问题

    一.前言 由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决方法(CORS实现)使用跨域处理方式处理而不用Jsonp的方式. 但是在一 ...

  4. nginx反向代理实现前后端分离&跨域问题

    1.代理和跨域 1.1 正向代理 1)用户希望代理服务器帮助其和要访问服务器之间实现通信,需要: a.用户IP报文的目的IP=代理服务器IP: b.用户报文端口号=代理服务器监听端口号: c.HTTP ...

  5. 关于.Net Core 前后端分离跨域请求时 ajax并发请求导致部分无法通过验证解决办法。

    项目中有这样一个页面.页面加载的时候会同时并发6个ajax请求去后端请求下拉框. 这样会导致每次都有1~2个“浏览器预请求”不通过. 浏览器为什么会自动发送“预请求”?请看以面连接 https://b ...

  6. Django前后端分离跨域请求问题

    一.问题背景 之前使用django+vue进行前后端分离碰到跨域请求问题,跨域(域名或者端口不同)请求问题的本质是由于浏览器的同源策略导致的,当请求的响应不是处于同一个域名和端口下,浏览器不会接受响应 ...

  7. 前后端分离跨域 关于前后端分离开发环境下的跨域访问问题(angular proxy=>nginx )

    前后端分离后遇到了跨域访问的问题: angular1中使用proxy很麻烦,最后还是失败结束:最后总结3种方法如下: 本人使用的第一种方法,只是开发环境下使用很方便! 1:禁掉谷歌的安全策略(Turn ...

  8. Java前后端的跨域问题

    1 前端127.0.0.1:8888 2 后端127.0.0.1:8080 前端和后端因为来自不同的网域,所以在http的安全协议策略下,不信任 3 解决方案,在springmvc的控制层加入@Cro ...

  9. $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)

    1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...

随机推荐

  1. FtpClient上传文件速度非常慢,而且大小为0,上传失败

    问题发生: 环境:VSFTP+FTPClient+Client 使用FTPClient上传文件的时候总是卡住,而且文件大小为0,上传失败, 解决方案: 添加代码:调用FTPClient的enterLo ...

  2. 2018-8-10-win10-uwp-依赖属性

    原文:2018-8-10-win10-uwp-依赖属性 title author date CreateTime categories win10 uwp 依赖属性 lindexi 2018-08-1 ...

  3. File操作,访问文件或目录的属性信息

    package seday03; import java.io.File;//记得导入File /** * File的每一个实例用于表示文件系统中的一个文件或目录 * 使用File可以: *  1:访 ...

  4. Java生鲜电商平台-电商中海量搜索ElasticSearch架构设计实战与源码解析

    Java生鲜电商平台-电商中海量搜索ElasticSearch架构设计实战与源码解析 生鲜电商搜索引擎的特点 众所周知,标准的搜索引擎主要分成三个大的部分,第一步是爬虫系统,第二步是数据分析,第三步才 ...

  5. PHP面试题2019年滴滴出行工程师面试题及答案解析

    一.单选题(共30题,每题5分) 1.下列关于PHP垃圾回收的说法,错误的是? A.开启/关闭垃圾回收机制可以通过修改php配置实现 B.可以在程序中使用gc_enable() 和 gc_disabl ...

  6. 易优CMS:arcview的基础用法

    [基础用法] 名称:arcview 功能:获取单条文档数据 语法: {eyou:arcview aid='文档ID'} <a href="{$field.arcurl}"&g ...

  7. paypal开发指南

    一.开发者地址: https://developer.paypal.com 使用在paypal上注册的账号登陆即可, 二.沙箱账号 paypay自动会为你创建两个沙箱账号,一个商家,一个买家.在acc ...

  8. jQuery animate() 方法

    定义和用法 animate() 方法执行 CSS 属性集的自定义动画. 该方法通过 CSS 样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果. 只有数字值可创建动 ...

  9. ABAP动态自建表维护程序Dynamin Process

    以前经常会遇到批量上传或修改数据到自建表的需求,所以在想是否可以做一个动态的程序,所有的自建表都可以用这个动态程序来维护. 于是就打算试着写动态的程序. 程序的要求:动态显示自建表ALV 动态下载Ex ...

  10. Ubuntu18.04连接蓝牙耳机

    使用的耳机是索尼WI-SP500,打开设置,找到Bluetooth,直接连接(WI-SP500在连接第二台设备时,需要长按开机键7秒才行), 保证Output选择需要连接的耳机,然后确保Profile ...