Nginx 解决WebApi跨域二次请求以及Vue单页面的问题
作者:简玄冰 发布时间:2023-10-13 23:43:06
一、前言
由于项目是前后端分离,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
来源:https://www.cnblogs.com/jianxuanbing/p/8252252.html
猜你喜欢
- 对于养活了大部分站长的百度,近期进行了大范围的更新,观察了百度近一个月,发现最近,百度大大地调整了算法,让很多站长唉声叹气,许多的普通的个人
- 很多用户不知道Godaddy域名应该怎么指定目录? 今天我们就来探讨一下这个问题。用户有两个域名aaa.com和bbb.net,由于主域名不
- 说明自己装系统时一般都可以自定义选择系统语言。可是云端服务器一般都是安装好的镜像,默认系统语言为英文,对于初学者可能还会有搞不懂的计算机词汇
- 基础环境装好宝塔服务宝塔里装好【Python项目管理器】宝塔里装好【Nginx】把Django项目代码发到服务器把代码放到服务器上有两种方法
- 最近和客户交谈,报完价格后,客户经常说的一句话就是“这么贵,那不如做竞价排名了”,那笔者在这里就给大
- 架设sendmail服务器 这次我们来学习Linux系统中的Sendmail服务器的配置。(邮件服务器的IP192.168.1.2 主机域名
- Discuz!是康盛创想(Comsenz)公司推出的一款论坛BBS产品,目前最新版本是Discuz! 7.1。为使站长更方便快捷地管理后台,
- Linux上创建进程据说消耗很少,这个一直是Linux的特点,于是就专门测试Linux创建进程的极限,测试代码如下://fork.c#inc
- 打开:template/admin/setstyles.htm查找<script type="text/javas
- WordPress3.3已经宣布功能添加冻结,预计在未来几周将进入Beta测试阶段,WordPress3.3可能将在12月份发布。WordP
- 解决w3wp.exe内存占用问题在IIS6下,经常出现w3wp的内存占用不能及时释放,从而导致服务器响应速度很慢。今天研究了一下,可以做以下
- 因为需要更改电子邮件,你也许想加强多个电子邮件帐户或者把不同的地址组织到不同的帐户里。要这样做,你不需要取消或者重新创建你的电子邮件帐户或者
- 核心提示:10年后,数据分析和行业渗透能力才是SEOER所特有的、能够经得起时间考验的,难以模仿的“核心竞争力&
- 输入字母验证码,俺觉得特烦,特别还要输入大写字母。于是找到文件并修改成数字验证码。修改文件 验证码文件位置include\validatei
- 3月19日消息,据国外媒体报道,有业内人士日前指出,在宽带连接几乎无处不在的今天,Google的搜索结果页面已经显得太单调。众所周知,Goo
- 很早前,为了自己注册域名方便,做了新网的代理,平常没事也会注册一些域名,或是有想做站、或是只是觉得有一个好域名值得去注册,最近因为工作上的事
- Web应用服务器集群系统,是由一群同时运行同一个web应用的服务器组成的集群系统,在外界看来,就像是一个服务器一样。为了均衡集群服务器的负载
- 中国雅虎开始逐渐更换各个频道的 Logo,将原来红色的 Logo 更换为紫色的 Logo,和 Yahoo! 相一致。而且页眉的导航链接也更换
- 5月19日消息,UC优视科技今日正式发布UC浏览器7.2正式版,全面支持Flash10技术。UC优视科技CEO俞永福表示,UC选择以攻克手机
- 上周我们已经向大家预告了我们将陆续推出Adsense“广告管理功能”,现在我们很高兴地通知大家,现在,我们已经开始分批推出这项功能了。一些发