公司项目从前后端不分离转到前后端分离

首先遇到的问题就是前后端分离的时候跨域的问题

但是当跨域成功配置并且能访问成功的时候发现

每次客户端的请求都会发送两次

第一次是OPTIONS的请求,然后才是正常的请求

查阅资料得到的结论是:

第一个OPTIONS的请求是由Web服务器处理跨域访问引发的。

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

一句话概括:因为我们公司的token通过header传递所以导致了浏览器判断该请求是复杂请求,所以要先通过OPTIONS请求进行预检查
解决方法
设置Access-Control-Max-Age(指定本次预检请求的有效期,单位秒)

nginx配置增加

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

nginx配置跨域之后前后端调用,二次请求的更多相关文章

  1. eclipse加速/Nginx配置跨域代理

    下班时间到啦! --下班都是他们的,而我,还是什么都没有. eclipse加速 去掉包含js文件的包的js验证,否则每次启动都需要进行校验(右击项目->properties) Nginx配置跨域 ...

  2. NGINX: 配置跨域请求

    说明: 内容全部来自 SegmentFault Developer Nginx 配置跨域请求 跨域请求失败, nginx 报错: 403 No 'Access-Control-Allow-Origin ...

  3. nginx配置跨域、gzip加速、代理详细讲解

    1.配置跨域 这个很简单,直接打开配置nginx.conf ,在http下配置下面三行代码:当然如果你是想某一个虚拟主机下跨域,那就在哪个server下面添加 add_header Access-Co ...

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

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

  5. nginx配置跨域之后每次访问会发送两次请求

    公司项目从前后端不分离转到前后端分离 首先遇到的问题就是前后端分离的时候跨域的问题 但是当跨域成功配置并且能访问成功的时候发现 每次客户端的请求都会发送两次 第一次是OPTIONS的请求,然后才是正常 ...

  6. Nginx配置跨域支持功能

    跨域是前端开发中经常会遇到的问题,前端调用后台服务时,通常会遇到 No 'Access-Control-Allow-Origin' header is present on the requested ...

  7. nginx配置跨域问题

    1.跨域指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器对JavaScript 施加的安全限制. 2.浏览器在执行脚本的时候,都会检查这个脚本属于哪个页面,即检查是否同源,只 ...

  8. Nginx配置跨域请求 CORS

    当出现403跨域错误的时候 No 'Access-Control-Allow-Origin' header is present on the requested resource,需要给Nginx服 ...

  9. Nginx配置跨域请求 Access-Control-Allow-Origin *

    当出现403跨域错误的时候 No 'Access-Control-Allow-Origin' header is present on the requested resource,需要给Nginx服 ...

随机推荐

  1. 日常工作问题解决:配置NTP服务器以及一些常见错误解决

    1.配置NTP服务端 环境:redhat 6.5 服务器主机名 ip地址 说明 server 192.168.57.20 NTP服务端 client 192.168.57.21 NTP客户端 搭建说明 ...

  2. 20191011-构建我们公司自己的自动化接口测试框架-Util的TestDataHandler模块

    TestDataHandler模块主要是做测试数据的处理,包括转换数据格式和变量参数处理转换数据格式函数: data是数据,data以$()的方式识别变量,如果请求的数据有变量,则将变量用global ...

  3. jenkins 打安卓包 cpu使用过高处理操作

    登录两个控制台 打包开始后 在其中一台机器执行ps -ef |grep jenkins 找到执行打包的主进程复制pid 在另一个终端上执行 top -H -p pid 将最耗cpu的线程id转换为16 ...

  4. C# SHA512和Base64加解密方法

    /// <summary> /// Get SHA512 Hash From String /// </summary> /// <param name="or ...

  5. html标签从.net framework转移到.net standard(.net core 2.2)时遇到的坑及填坑

    在原来的.net framework mvc中html的标签可以使用下面的方法 <select class="form-control" id="categoryi ...

  6. ES 6 日期util.js =>

    微信小程序demo const formatTime = date => { const year = date.getFullYear() const month = date.getMont ...

  7. java小工具:通过URL连接爬取资源(图片)

    java语言编写一个简单爬取网站图片工具,实现简单: 通过 java.net.HttpURLConnection 获取一个URL连接 HttpURLConnection 连接成功返回一个java.io ...

  8. 微信支付之二维码支付(native)

    HoJe男孩子你要加油阿 准备材料微信支付需要的参数统一下单二维码回调接口用到的工具类 . 准备材料 首先肯定是要有微信的开发文档开发文档地址再然后就是一些必的参数 注意:回调地址异步接收微信支付结果 ...

  9. 通用http状态码

    400:Bad Request 表示客户端发出的请求不支持或无法识别,这通常是并未使用正确的请求语法.例如post或者put请求中资源的某个字段被设置为空的话,这将会导致一个Bad Request响应 ...

  10. 使用Mmap系统调用进行硬件地址访问

    Mmap系统调用: Mmap函数是内存映射函数,负责把文件内容映射到进程的虚拟内存空间,通过对这段内存的读取和修改,来实现堆文件的读取和修改,而不需要再调用read,write等操作. 原型如下: 其 ...