Nginx 解决WebApi跨域二次请求以及Vue单页面问题
一、前言
由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决方法(CORS实现)使用跨域处理方式处理而不用Jsonp
的方式。
但是在一段时间后,发现一个很奇怪的问题,每次前端发起请求的时候,通过浏览器的开发者工具都能看到在Network
下同一个url
有两条请求,第一条请求的Method
为OPTIONS
,第二条请求的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
已自带默认配置,如要部署Vue
、Angular
这种单页面应用,将打包后的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单页面问题的更多相关文章
- 解决前后端调用,跨域二次请求Access-Control-Max-Age
发现前后端分离的项目中,前端发起一个请求到后端,在Chrome浏览器下面debug的时候,Network下面看到同一个url有两条请求,url有两条请求,第一条请求的Method为OPTIONS,第二 ...
- 如何用Nginx解决前端跨域问题?
前言 在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调. 最简单的解决方法,就是把浏览器设为忽略安全问题,设置--di ...
- CORS解决WebApi跨域问题(转)
CORS全称Cross-Origin Resource Sharing,中文全称跨域资源共享.它解决跨域问题的原理是通过向http的请求报文和响应报文里面加入相应的标识告诉浏览器它能访问哪些域名的请求 ...
- 【Nginx】在Windows下使用Nginx解决前端跨域问题
提出问题:因为一些历史原因,后台代码不能动.请求别人的接口拿数据显示在前端,怎么办呢? 分析问题:通过ajax请求. 解决问题:因为浏览器的同源策略,所以需要解决跨域问题.(同源策略:请求的url地址 ...
- 使用筛选器特性标记方法解决webapi 跨域问题
在我的之前随笔 解决api.WebService跨域问题 中有人问到可以用特性来解决跨域问题吗,答案是肯定的,可以的:操作如下: 首先建一个类CrossSiteAttribute:从抽象 Action ...
- 利用nginx解决cookie跨域
一.写在前面 最近需要把阿里云上的四台服务器的项目迁移到客户提供的新的项目中,原来的四台服务器中用到了一级域名和二级域名.比如aaa.abc.com 和bbb.abc.com 和ccc.abc.com ...
- nginx解决浏览器跨域问题
1.跨域问题 浏览器出于安全方面的考虑,只允许与本域下的接口交互.不同源的客户端脚本在没有明确授权的情况下,不能读写对方的资源. 例如访问www.test1.com 页面, 返回的文件中需要ajax向 ...
- 用nginx解决前端跨域问题
假如前端你项目部署在nginx的根目录下,然后项目需要请求后台小伙伴写的接口 nginx配置: #user nobody; worker_processes 1; #error_log logs/er ...
- nginx解决前端跨域配置
在nginx.conf文件中 添加如上配置: 在ajax中将原来的 url:http://192.168.1.127:8905/findItem 改成:'http://localhost/findIt ...
随机推荐
- js+画曲线和圆 并限制圆的渲染范围
通过三个点的坐标可确定一条双曲线. 公式: 1)y=ax^2+bx+c; 2) y=a(x-k)+h; 通过已知三点可确定a,b,c,h,k 2.通过圆心坐标(a,b)和半径r可确定一个圆,和已知的x ...
- java 邮件发送的公共方法
protected static String host = "true"; protected static String auth = "smtp.163.com&q ...
- 从源代码到Runtime发生的重排序
源代码和Runtime时执行的代码很可能不一样,这是因为编译器.处理器常常会为了追求性能对改变执行顺序.然而改变顺序执行很危险,很有可能使得运行结果和预想的不一样,特别是当重排序共享变量时. 从源 ...
- Intellij IDEA安装golang插件
原文作者:Jianan - qinxiandiqi@foxmail.com 原文地址:http://blog.csdn.net/qinxiandiqi/article/details/50319953 ...
- 1692: [Usaco2007 Dec]队列变换|后缀数组|贪心
将字符串翻转后接到原串的后面,中间加一个分隔符,每次都贪心选择rankrank小的那个 事实上就是练习一发后缀数组的模板 #include<algorithm> #include<i ...
- Win32界面 主函数分析
WinMain即(函数运行入口): p { margin-bottom: 0.25cm; line-height: 120% } int WINAPI WinMain (HINSTANCE hinst ...
- ABP入门系列(6)——定义导航菜单
ABP入门系列目录--学习Abp框架之实操演练 完成了增删改查以及页面展示,这一节我们来为任务清单添加[导航菜单]. 在以往的项目中,大家可能会手动在layout页面中添加一个a标签来新增导航菜单,这 ...
- 十二、 Spring Boot 静态资源处理
spring Boot 默认为我们提供了静态资源处理,使用 WebMvcAutoConfiguration 中的配置各种属性. 建议大家使用Spring Boot的默认配置方式,如果需要特殊处理的再通 ...
- 关于MySql中使用IFNULL()函数失效的问题。
今天在学习时,碰到一个问题:在联表查询取得结果后,如果取得的结果是空值,则给一个默认值,如果不是空值,则返回这个值. 下面我们来看看业务场景: 在menu表中: 存储的是前端页面的菜单配置,注意成员权 ...
- sql对每一条记录都给他一个随机的数。
update [WonyenMall].[dbo].[T_Real_Commodity] set increment=FLOOR(RAND(ABS(CHECKSUM(NEWID()))) * 100) ...