当前位置 主页 > 服务器问题 > nginx问题汇总 >

Nginx如何解决WebApi跨域二次请求以及Vue单页面的问题?

栏目:nginx问题汇总 时间:2018-12-15 11:05

  一、前言
  由于项目是前后端分离,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
缩小 缩小 缩小 缩小
IIS7整站下载工具 IIS7批量查询排名 IIS7远程桌面连接工具 iis7-iis网站批量管理 iis7批量替换工具 IIS7服务器专用下载工具 IIS7日志分析工具 IIS7批量PING,服务器批量添加网卡IP小工具 IIS7远程同步备份工具
IIS7网站监控 站群批量SEO查询 批量获取排名域名 批量关键词排名查询 模拟各种蜘蛛 批量友情链接监测 批量检测死链 搜索引擎大全 批量查询外链
批量查询网站标题 批量查询KeyWords 批量查询描述 批量查询网站IP 批量百度收录查询 批量查询百度日收录 批量查询百度周收录 批量查询百度月收录 批量查询360总收录 批量查询360日收录 批量查询网站年龄 批量查询360PC权重 批量查询爱站移动权重 批量查询站长移动权重 批量查询360移动权重 批量查询神马权重 批量查询谷歌PR 批量查询搜狗PR 批量查询百度反链 批量查询爱站首页反链 批量查询爱站内页反链 批量查询百度快照 批量查询搜狗快照 批量icp备案查询 批量网站ip地址查询 批量查询导出链接 批量查询百度V认证 批量查询百度安全 批量查询站长PC权重 批量查询爱站PC权重 批量查询搜狗总收录 站长资源大全 IIS7-cms大全 IIS7站群大全 IIS7虚拟空间大全 IIS7服务器大全 IIS7-VPS大全 服务器代购 站群专用 美国站群服务器 香港站群服务器 特供站群vps 亚洲服务器 菲律宾HS 韩国首尔 香港PCCW 香港沙田电信 香港PowerLine 日本多机房 新加坡多机房 韩国大带宽 香港新世界 香港Pangnet 台湾 美国服务器 加州RS 美国vps母鸡租用 洛杉矶MC 洛杉矶C3 特价促销区 洛杉矶NS 洛杉矶Cera高防 洛杉矶HS高防 SK高防 洛杉矶WX 加州RH 芝加哥AT VPS云主机 香港沙田电信 韩国首尔 香港Pangnet 新加坡SG 香港PL 洛杉矶SK 抗攻击 洛杉矶C3 日本大阪 洛杉矶Cera 抗攻击 洛杉矶MC 纽约 SSD 抗攻击 大容量备份VPS 国庆大促 俄罗斯