一、前言

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

但是在一段时间后,发现一个很奇怪的问题,每次前端发起请求的时候,通过浏览器的开发者工具都能看到在Network下同一个url有两条请求,第一条请求的MethodOPTIONS,第二条请求的Method才是真正的Get或者Post,并且,第一条请求无数据返回,第二条请求才返回正常的数据。

二、原因

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

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

产生原因如下:

  • 使用CORS解决跨域问题

三、解决方案

3.1 Nginx

3.1.1 思路

  • 将前端项目部署在Nginx当中,通过代理的方式来解决跨域请求问题

3.1.2 实现

3.1.2.1 安装 Nginx

Windows 下 安装 Nginx 最简单,直接下载压缩包,然后解压后

3.1.2.2 配置 Nginx

已自带默认配置,如要部署VueAngular这种单页面应用,将打包后的index.html文件以及dist目录放到发布目录中,将路径复制,用于配置Nginx服务指向

配置文件如下:

    server {
listen 9461; # 监听端口号
server_name localhost 192.168.88.22; # 访问地址
location / {
root 项目路径; # 例如:E:/Publish/xxx/;
index index.html; # 此处用于处理 Vue、Angular、React 使用H5 的 History时 重写的问题
if (!-e $request_filename) {
rewrite ^(.*) /index.html last;
break;
}
} # 代理服务端接口
location /api {
proxy_pass http://localhost:9460/api;# 代理接口地址
}
}

3.1.2.3 Nginx 常用命令

  • 启动:start nginx
  • 重新加载配置:nginx -s reload
  • 重新打开日志文件:nginx -s reopen
  • 测试配置文件是否正确:nginx -t [可选:指定路径]
  • 快速停止:nginx -s stop
  • 有序停止:nginx -s quit

3.1.3 Nginx 单页面应用H5 History Url重写

  • 支持

    Vue、Angular、React
  • 原因

    实现单页面时,刷新页面会产生页面找不到的问题,所以需要重写Url地址到index.html当中。
  • 注意点

    在使用Nginx中URL重写的时候,一直报错如下



    检查后,发现 if( 之间必须有个空格。

3.2 Other

3.2.1 思路

  • 既然要发送预检请求,是否可以减少预检请求的次数?
  • 例如可以设定一个有效期,在有效期内不再重复预检。

3.2.2 实现

可以在服务端处预检完成后加入一个Access-Control-Max-Age请求头来解决这个问题。

3.2.3 CORS 响应字段说明

  • Access-Control-Allow-Methods

    该字段必需,它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法。

    注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。
  • Access-Control-Allow-Headers

    如果浏览器请求包括Access-Control-Request-Headers字段,则Access-Control-Allow-Headers字段是必需的。

    它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段,不限于浏览器在"预检"中请求的字段。
  • Access-Control-Allow-Credentials

    该字段与简单请求时的含义相同。
  • Access-Control-Max-Age

    该字段可选,用来指定本次预检请求的有效期,单位为秒。上面结果中,有效期是20天(1728000秒),即允许缓存该条回应1728000秒(即20天),在此期间,不用发出另一条预检请求。
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

四、参考文献

Nginx 解决WebApi跨域二次请求以及Vue单页面问题的更多相关文章

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

    发现前后端分离的项目中,前端发起一个请求到后端,在Chrome浏览器下面debug的时候,Network下面看到同一个url有两条请求,url有两条请求,第一条请求的Method为OPTIONS,第二 ...

  2. 如何用Nginx解决前端跨域问题?

    前言 在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调. 最简单的解决方法,就是把浏览器设为忽略安全问题,设置--di ...

  3. CORS解决WebApi跨域问题(转)

    CORS全称Cross-Origin Resource Sharing,中文全称跨域资源共享.它解决跨域问题的原理是通过向http的请求报文和响应报文里面加入相应的标识告诉浏览器它能访问哪些域名的请求 ...

  4. 【Nginx】在Windows下使用Nginx解决前端跨域问题

    提出问题:因为一些历史原因,后台代码不能动.请求别人的接口拿数据显示在前端,怎么办呢? 分析问题:通过ajax请求. 解决问题:因为浏览器的同源策略,所以需要解决跨域问题.(同源策略:请求的url地址 ...

  5. 使用筛选器特性标记方法解决webapi 跨域问题

    在我的之前随笔 解决api.WebService跨域问题 中有人问到可以用特性来解决跨域问题吗,答案是肯定的,可以的:操作如下: 首先建一个类CrossSiteAttribute:从抽象 Action ...

  6. 利用nginx解决cookie跨域

    一.写在前面 最近需要把阿里云上的四台服务器的项目迁移到客户提供的新的项目中,原来的四台服务器中用到了一级域名和二级域名.比如aaa.abc.com 和bbb.abc.com 和ccc.abc.com ...

  7. nginx解决浏览器跨域问题

    1.跨域问题 浏览器出于安全方面的考虑,只允许与本域下的接口交互.不同源的客户端脚本在没有明确授权的情况下,不能读写对方的资源. 例如访问www.test1.com 页面, 返回的文件中需要ajax向 ...

  8. 用nginx解决前端跨域问题

    假如前端你项目部署在nginx的根目录下,然后项目需要请求后台小伙伴写的接口 nginx配置: #user nobody; worker_processes 1; #error_log logs/er ...

  9. nginx解决前端跨域配置

    在nginx.conf文件中 添加如上配置: 在ajax中将原来的 url:http://192.168.1.127:8905/findItem 改成:'http://localhost/findIt ...

随机推荐

  1. Eclipse使用Maven tomcat:run命令启动web项目时修改默认端口

  2. VS上关于找不到程序集的问题

    第一次重新装了次vs再次导入以前写的项目发现找不到程序集,出现很多的警告和错误,并且代码里好多都是显示红色的 第二次乱动了下又出现此问题 记录下解决的方案和一些相关的问题方案 1.引用一个DLL,需要 ...

  3. 服务器列表里找不到OracleOraDb10g_home1TNSListener

    先安装的ORACLE DB,后配置的数据库,TNSNAMES.ORA, LISTENER.ORA配置完毕,客户端连接不上TNS服务器,发现服务列表里没有OracleOraDb10g_home1TNSL ...

  4. UVALIVE 4970 最小权匹配

    首先贴一下这道题的BNU地址,UVA地址自己找吧. http://acm.bnu.edu.cn/bnuoj/problem_show.php?pid=11852 题意:这道题的意思就是,给你N个棋子的 ...

  5. poj 2676 Sudoku ( dfs )

    dfs 用的还是不行啊,做题还是得看别人的博客!!! 题目:http://poj.org/problem?id=2676 题意:把一个9行9列的网格,再细分为9个3*3的子网格,要求每行.每列.每个子 ...

  6. 运动框架实现思路(js)

    思路:速度.(改变left,right,width,height,opacity) 2.缓冲动画. 3.多物体运动. 4.任意值变化. 5.链式运动. 6.同时运动.

  7. java的设计模式 - 静态工厂方法

    静态工厂方法,也不知道为何叫这个名字.其实也就是一个静态函数,可以替代构造函数用.大名鼎鼎的 guava 就大量使用这种模式,这是非常有用的模式. 比如是 Integer i = Integer.va ...

  8. nginx在代理转发地图瓦片数据中的应用

    最近有这样一个需求,需要将arcgis server发布的地图瓦片放在移动硬盘中,系统演示的时候,直接调用本地的地图瓦片,而非远程的,主要是为了系统演示的时候加快地图访问速度. 而且需要在任意电脑运行 ...

  9. 前端数据库——WebSQL和IndexedDB

    一.WebSQL WebSQL是前端的一个独立模块,是web存储方式的一种,我们调试的时候会经常看到,只是一般很少使用.并且,当前只有谷歌支持,ie和火狐均不支持. 我们对数据库的一般概念是后端才会跟 ...

  10. 1-tomcat简介

    一.tomcate的目录结构说明: 1.bin:存放服务器启动和关闭的命令文件.2.conf:存放服务器的配置信息文件3.lib:存放服务器自身需要的所有jar文件,也称为全局jar文件(只要部署在当 ...