搜索
首页运维NginxNginx怎么解决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重写的时候,一直报错如下

Nginx怎么解决WebApi跨域二次请求及Vue单页面的问题

检查后,发现 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单页面的问题的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文转载于:亿速云。如有侵权,请联系admin@php.cn删除
NGINX单元:架构及其工作原理NGINX单元:架构及其工作原理Apr 23, 2025 am 12:18 AM

NGINXUnit通过其模块化架构和动态重配置功能提高了应用的性能和可管理性。1)模块化设计包括主控进程、路由器和应用进程,支持高效管理和扩展。2)动态重配置允许在运行时无缝更新配置,适用于CI/CD环境。3)多语言支持通过动态加载语言运行时实现,提升了开发灵活性。4)高性能通过事件驱动模型和异步I/O实现,即使在高并发下也保持高效。5)安全性通过隔离应用进程提高,减少应用间相互影响。

使用NGINX单元:部署和管理应用程序使用NGINX单元:部署和管理应用程序Apr 22, 2025 am 12:06 AM

NGINXUnit可用于部署和管理多种语言的应用。1)安装NGINXUnit。2)配置它以运行不同类型的应用,如Python和PHP。3)利用其动态配置功能进行应用管理。通过这些步骤,你可以高效地部署和管理应用,提升项目效率。

NGINX与Apache:Web服务器的比较分析NGINX与Apache:Web服务器的比较分析Apr 21, 2025 am 12:08 AM

NGINX更适合处理高并发连接,而Apache更适合需要复杂配置和模块扩展的场景。 1.NGINX以高性能和低资源消耗着称,适合高并发。 2.Apache以稳定性和丰富的模块扩展闻名,适合复杂配置需求。

NGINX单元的优势:灵活性和性能NGINX单元的优势:灵活性和性能Apr 20, 2025 am 12:07 AM

NGINXUnit通过其动态配置和高性能架构提升应用的灵活性和性能。1.动态配置允许在不重启服务器的情况下调整应用配置。2.高性能体现在事件驱动和非阻塞架构以及多进程模型上,能够高效处理并发连接和利用多核CPU。

NGINX与Apache:性能,可伸缩性和效率NGINX与Apache:性能,可伸缩性和效率Apr 19, 2025 am 12:05 AM

NGINX和Apache都是强大的Web服务器,各自在性能、可扩展性和效率上有独特的优势和不足。1)NGINX在处理静态内容和反向代理时表现出色,适合高并发场景。2)Apache在处理动态内容时表现更好,适合需要丰富模块支持的项目。选择服务器应根据项目需求和场景来决定。

终极摊牌:nginx vs. apache终极摊牌:nginx vs. apacheApr 18, 2025 am 12:02 AM

NGINX适合处理高并发请求,Apache适合需要复杂配置和功能扩展的场景。1.NGINX采用事件驱动、非阻塞架构,适用于高并发环境。2.Apache采用进程或线程模型,提供丰富的模块生态系统,适合复杂配置需求。

nginx行动:示例和现实应用程序nginx行动:示例和现实应用程序Apr 17, 2025 am 12:18 AM

NGINX可用于提升网站性能、安全性和可扩展性。1)作为反向代理和负载均衡器,NGINX可优化后端服务和分担流量。2)通过事件驱动和异步架构,NGINX高效处理高并发连接。3)配置文件允许灵活定义规则,如静态文件服务和负载均衡。4)优化建议包括启用Gzip压缩、使用缓存和调整worker进程。

NGINX单元:支持不同的编程语言NGINX单元:支持不同的编程语言Apr 16, 2025 am 12:15 AM

NGINXUnit支持多种编程语言,通过模块化设计实现。1.加载语言模块:根据配置文件加载相应模块。2.应用启动:调用语言运行时执行应用代码。3.请求处理:将请求转发给应用实例。4.响应返回:将处理后的响应返回给客户端。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用