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

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

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

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

第一次是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. mysql 记录 - concat、concat_ws、group_concat 的用法

    本文中使用的例子均在下面的数据库表tt2下执行: 一.concat()函数 1.功能:将多个字符串连接成一个字符串. 2.语法:concat(str1, str2,...) 返回结果为连接参数产生的字 ...

  2. java枚举的线程安全及序列化

    原文链接:https://www.cnblogs.com/z00377750/p/9177097.html https://www.cnblogs.com/chiclee/p/9097772.html ...

  3. 《ucore lab1 exercise1》实验报告

    资源 ucore在线实验指导书 我的ucore实验代码 题目:理解通过make生成执行文件的过程 列出本实验各练习中对应的OS原理的知识点,并说明本实验中的实现部分如何对应和体现了原理中的基本概念和关 ...

  4. Fiddler之基础:面板、图标介绍

    1.面板介绍:菜单栏,工具栏,回话面板,监控面板 2.工具栏-图标 3.会话面板-图标 4.监控面板 5.状态栏 控制台Fiddler的左下角有一个命令行工具叫做QuickExec,允许你直接输入命令 ...

  5. Java基础---Java 开发工具IntelliJ IDEA 安装

    1.1 开发工具概述IDEA是一个专门针对Java的集成开发工具(IDE),由Java语言编写.所以,需要有JRE运行环境并配置好环境变量.它可以极大地提升我们的开发效率.可以自动编译,检查错误.在公 ...

  6. ElasticSearch入门-基本概念介绍以及安装

    Elasticsearch基本概念 Elasticsearch是基于Lucene的全文检索库,本质也是存储数据,很多概念与传统关系型数据库类似. 传统关系型数据库与Elasticsearch进行概念对 ...

  7. 习题一初步理解时间复杂度大O表示法案例

    1.如果 a+b+c=1000,且 a^2+b^2=c^2(a,b,c 为自然数),如何求出所有a.b.c可能的组合? 如上:a+b+c=1000, a平方+b平方=c平方  求出所有abc可能的组合 ...

  8. 搭建apache2.4+php7+mysql+phpmyadmin

    apache2.2不支持php7,会报错 cannot load php7apache2_4.dll into server 前排提示:保证安装文件夹和我的一致可以省事很多哦 下载地址 下载apach ...

  9. yii2中 选择布局的方式,可以设置不使用布局

    ###yii2中 选择布局的方式,可以设置不使用布局 控制器内成员变量 public $layout = false; //不使用布局 public $layout = "main" ...

  10. jquery绑定input的change事件

    ### jquery绑定input的change事件 背景:在做一个登录页时,如果用户未输入验证码则无法点击登录按钮,所以想到了用input的change事件,但是在写完后发现无法监听input值的改 ...