伟哥官网wyhzs,商标注册流程及费用,珍惜 李宇春
一、前言由于项目是前后端分离,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 安装 NginxWindows 下 安装 Nginx 最简单,直接下载压缩包,然后解压后
3.1.2.2 配置 Nginx已自带默认配置,如要部署Vue、Angular这种单页面应用,将打包后的文件以及dist目录放到发布目录中,将路径复制,用于配置Nginx服务指向
配置文件如下:
server { listen 9461; # 监听端口号 server_name localhost 192.168.88.22; # 访问地址 location / { root 项目路径; # 例如:E:/Publish/xxx/; index ; # 此处用于处理 Vue、Angular、React 使用H5 的 History时 重写的问题 if (!-e $request_filename) { rewrite ^(.*) / 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重写 支持
可以在服务端处预检完成后加入一个Access-Control-Max-Age请求头来解决这个问题。
3.2.3 CORS 响应字段说明 Access-Control-Allow-MethodsAccess-Control-Allow-Methods: GET, POST, PUT Access-Control-Allow-Headers: X-Custom-Header Access-Control-Allow-Credentials: true Access-Control-Max-Age: 1728000四、参考文献 跨域资源共享 CORS 详解
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
Net Core Web Api项目与在NginX下发布的方法
asp.net core3.1 引用的元包dll版本兼容性问题解决方案
IdentityServer4实现.Net Core API接口权限认证(快速入门)
ASP.NET Core MVC通过IViewLocationExpander扩展视图搜索路径的实现
网友评论