小编给大家分享一下Nginx怎么解决WebApi跨域二次请求以及Vue单页面的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强>一、前言
由于项目是前后端分离,API接口与Web前端部署在不同站点当中,因此在前文当中WebApi Ajax跨域请求解决方法(歌珥实现)使用跨域处理方式处理而不用Jsonp的方式。
但是在一段时间后,发现一个很奇怪的问题,每次前端发起请求的时候,通过浏览器的开发者工具都能看到在网络下同一个url有两条请求,第一条请求的方法为选择,第二条请求才的方法是真正的获得或者,并且,第一条请求无数据返回,第二条请求才返回正常的数据。
<强>二,原因
第一个选项的请求是由Web服务器处理跨域访问引发的.OPTIONS是一种预检请求,浏览器在处理跨域访问的请求时,如果判断请求为复杂请求,则会先向服务器发送一条预检请求,根据服务器返回的内容,浏览器判断服务器是否允许访问该请求。如果Web服务器采用歌珥的方式支持跨域访问,在处理复杂请求时这个预检请求是不可避免的。
由于我们的Web服务器采用歌珥来解决跨域访问的问题,同时在标题中添加了自定义参数以及使用json格式来进行数据交互,导致我们的每次请求都是复杂请求,从而产生每次请求都会发送两条请求的现象。
<强>产生原因如下:
使用歌珥解决跨域问题
<强>三,解决方案
<强> 3.1 Nginx
<强> 3.1.1思路
将前端项目部署在Nginx当中,通过代理的方式来解决跨域请求问题
<强> 3.1.2实现
<强> 3.1.2.1安装Nginx
Windows下安装Nginx最简单,直接下载压缩包,然后解压后
<强> 3.1.2.2配置Nginx
已自带默认配置,如要部署Vue,角这种单页面应用,将打包后的指数。html文件以及dist目录放到发布目录中,将路径复制,用于配置Nginx服务指向
配置文件如下:
<强> 3.1.2.3 Nginx常用命令
启动:开始Nginx
重新加载配置:Nginx - s重载
重新打开日志文件:Nginx - s重开
测试配置文件是否正确:Nginx - t(可选:指定路径)
快速停止:Nginx - s停止
有序停止:Nginx - s退出
<强> 3.1.3 Nginx单页面应用H5历史Url重写
<强>支持
Vue,角,反应
<强>原因
实现单页面时,刷新页面会产生页面找不到的问题,所以需要重写Url地址到索引。当html中。
<强>注意点
在使用Nginx中URL重写的时候,一直报错如下
检查后,发现如果和(之间必须有个空格。
<强> 3.2其他
<强> 3.2.1思路
既然要发送预检请求,是否可以减少预检请求的次数?
例如可以设定一个有效期,在有效期内不再重复预检。
<强> 3.2.2实现
可以在服务端处预检完成后加入一个Access-Control-Max-Age请求头来解决这个问题。
<强> 3.2.3歌珥响应字段说明
Access-Control-Allow-Methods
该字段必需,它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法。
注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法。这是为了避免多次“预检“请求。
Access-Control-Allow-Headers
如果浏览器请求包括Access-Control-Request-Headers字段,则Access-Control-Allow-Headers字段是必需的。
它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段,不限于浏览器在“预检“中请求的字段。
Access-Control-Allow-Credentials
该字段与简单请求时的含义相同。
