Nginx反向代理实现Vue跨域注意事项

1、通过搜索引擎访问Nginx官网——免费使用——NGINX开源版(免费下载)或者通过以下链接直接访问Nginx下载页面下载对应的版本(下载页面)。以下以1.24.0为例
在这里插入图片描述
2、修改nginx的配置文件,在conf文件夹下,文件名为nginx.conf;以下是我修改完的配置(在http的server项内):

		listen       5101;#需要监听的端口server_name  127.0.0.1;#charset koi8-r;charset utf-8;#access_log  logs/host.access.log  main;location /api { #尾加也可以斜杠"/",proxy_pass 的值同步修改proxy_pass              http://127.0.0.1:8968/api;#注意:使用代理地址时跟上面保持一致(/api)末尾不加斜杠"/"。proxy_set_header        Host 127.0.0.1;proxy_set_header        X-Real-IP $remote_addr;proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;}location / {  #使用"/"拦截全路径的时候记得放在最后。root   html; # html表示存放静态资源的文件夹,根据实际情况修改index  index.html index.htm; # 默认的访问文件if (!-e $request_filename) {rewrite ^(.*)$ /index.html?s=$1 last;break;}  #处理页面刷新404错误}

我已将相关要点在对应配置后面做了备注,可能会影响正常使用,建议大家在实际使用中把和配置在同一行的备注去掉。

配置完conf文件后,双击nginx启动
在这里插入图片描述
这样我们在访问http://192.168.100.252:5101的时候,就会打开你的前端项目页面,在请求接口时,需要在前端项目将base url改为:http://127.0.0.1:5101/api;这样当前端请求后端地址http://127.0.0.1:5101/api/auth/login 时会将请求的接口地址带到http://127.0.0.1:8968/api/auth/login上;我的前端和后端部署在同一台服务器上,不在同一台服务器上也可以实现,只需要修改proxy_pass的对应值(后端接口的真实地址)就可以了。我们前端项目的域名和请求后端接口的域名都是192.168.100.252:5101,这样就不会存在跨域问题了。
在项目部署中遇到了页面刷新404和方向代理不能处理问题,都解决了。解决方案如下:
处理页面刷新404问题,在localtion / 下加

 if (!-e $request_filename) {rewrite ^(.*)$ /index.html?s=$1 last;break;}

不能正常反向代理:
错误配置如下:

location /api/ {proxy_pass              http://127.0.0.1:5102/api;proxy_set_header        Host 127.0.0.1;proxy_set_header        X-Real-IP $remote_addr;proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;}

修改后的正确配置

location /api/ {proxy_pass              http://127.0.0.1:5102/api/;proxy_set_header        Host 127.0.0.1;proxy_set_header        X-Real-IP $remote_addr;proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;}

或者下面示例中的也完全可以

location /api {proxy_pass              http://127.0.0.1:5102/api;proxy_set_header        Host 127.0.0.1;proxy_set_header        X-Real-IP $remote_addr;proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/36983.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Zabbix如何帮助企业将监控数据转化为竞争优势

By Fernanda Moraes 在我们生活的高度互联世界中,变化以越来越快和激烈的速度发生。这影响了消费者的认知与行为,迫使零售商寻找更有效的方式来吸引客户。Linx 是 StoneCo 集团旗下的一家公司,也是零售技术专家,Linx了解这一点&am…

深度挖掘数据资产,洞察业务先机:利用先进的数据分析技术,精准把握市场趋势,洞悉客户需求,为业务决策提供有力支持,实现持续增长与创新

在当今日益激烈的商业竞争环境中,企业想要实现持续增长与创新,必须深入挖掘和有效运用自身的数据资产。数据不仅是企业运营过程中的副产品,更是洞察市场趋势、理解客户需求、优化业务决策的重要资源。本文将探讨如何通过利用先进的数据分析技…

java虚拟机栈帧操作

虚拟机栈(Virtual Machine Stack)是虚拟机(如JVM、Python VM等)用来管理方法调用和执行的栈结构。它主要用于存储方法调用的相关信息,包括局部变量、操作数栈、动态链接和方法返回地址等。 java虚拟机栈操作的基本元素就是栈帧,栈帧主要包含了局部变量表、操作数栈、动态…

电脑缺失VCRUNTIME140_1.dll的原因分析及5种解决方法分享

在电脑使用过程中,我们可能会遇到一些错误提示,其中之一就是“VCRUNTIME140_1.dll丢失”。那么,VCRUNTIME140_1.dll是什么?它丢失的原因有哪些?对电脑有什么影响?如何解决这个问题以及预防再次丢失呢&#…

【机器学习】在【PyCharm中的学习】:从【基础到进阶的全面指南】

目录 第一步:基础准备 1.1 Python基础 1.1.1 学习Python的基本语法 变量和数据类型: 1.1.2 控制流 条件语句: 循环语句: 1.1.3 函数和模块 函数: 模块: 1.2 安装PyCharm 1.2.1 下载并安装 第二…

在创意设计领域“刷屏”的人工智能生成内容(AIGC)是什么?

在创意设计领域“刷屏”的人工智能生成内容(AIGC)是什么?这是一个值得深入探讨的话题,它关乎技术的革新、创意的边界以及未来设计行业的走向。随着人工智能技术的飞速发展,AIGC(Artificial Intelligence Ge…

聚鼎贸易:装饰画行业还有没有前景

在数字化的浪潮中,装饰画行业似乎被边缘化,成为传统与现代较量中的一片瓦砾。然而,透过表面的凋零,我们能够窥见其潜藏的蓬勃生机与无限前景。 随着社会的快速发展,人们对生活品质的追求日益提高。家,作为个…

火锅食材配送小程序的作用有什么

火锅店、麻辣烫店、餐厅等对火锅丸子食材的需求量很高,还有普通消费者零售等,市场中或城市里总是有着较为知名的食材店或厂商,通过产品质量、口碑、宣传、老客复购等获得更多生意营收。 线下生意放缓,需要商家拓宽渠道。运用雨科…

2、网上图书订购

完整DDLDML SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS 0;-- ---------------------------- -- Table structure for administarators -- ---------------------------- DROP TABLE IF EXISTS administarators; CREATE TABLE administarators (admin_id int(11) NOT NULL AU…

搜维尔科技:SenseGlove Nova2国内首款支持手掌心力回馈手套开售

《SenseGlove Nova 2》现正全球发行中! 搜维尔科技独家代理最新上市的 SenseGlove Nova 2 是世上首款,也是目前市面上唯一一款提供手掌力回馈的无缐VR力回馈手套,它结合了三种最先进的反馈技术,包括主动反馈、强力反馈及震动反馈&#xff0c…

基于横纵向的混合联邦学习原理分析

近期陆续接触到关于混合联邦学习的概念,但基于横纵向的混合联邦实际的应用案例却几乎没有看到,普遍是一些实验性的课题,因此这一领域知识没有被很好普及。本篇文章的目的,主要是分析讨论关于横纵向混合联邦学习的业务场景、应用架…

nginx: [warn] 20240 worker_connections exceed open file resource limit: 1024

nginx: [warn] 20240 worker_connections exceed open file resource limit: 1024 报错翻译过来就是: nginx:[警告] 20240 worker_connections超出打开文件资源限制:1024 解决方法: 1.查看当前文件打开数量的限制 ulimit -S…

2024软博会

2024年,金秋的十月,青岛国际会展中心迎来了一年一度的科技盛宴——青岛国际软件融合创新博览会(简称“青岛软博会”)。这场为期三天的展会,不仅吸引了全球软件产业的目光,更成为了展示中国软件产业发展成果…

OpenHarmony南向驱动开发实战-Input

简介 该仓下主要包含Input模块HDI(Hardware Driver Interface)接口定义及其实现,对上层输入服务提供操作input设备的驱动能力接口,HDI接口主要包括如下三大类: InputManager:管理输入设备,包括…

数据库系统概论(超详解!!!) 第十四节 数据库恢复技术

1.事务的基本概念 1.事务 事务(Transaction)是用户定义的一个数据库操作序列,这些操作要么全做,要么全不做,是一个不可分割的工作单位。 事务和程序是两个概念, 在关系数据库中,一个事务可以是一条SQL语句&#xff…

rockey linux rpm安装mysql 8.4.0

背景介绍: 系统 rockey linux 9.4 mysql 8.4.0 我一开始想在系统上安装5.7的着,因为我有这个包,但是通过rpm安装的时候,到最后一步提示我没有/usbin/chkconfig 这个目录,怀疑是系统的问题,然后想安装chk…

未来先行!MWC 2024 世界移动通信大会盛大开幕!!!

2024MWC上海世界移动通信大会,在上海新国际博览中心(SNIEC)盛大开幕。 今年,MWC的主办方GSMA(全球移动通信系统协会)为这届MWC定下了一个主题——“Future First(未来先行)”。各大…

内网穿透技术

内网穿透(NAT traversal)是一种技术,用于实现公网与内网之间的通信连接。当内网中的设备无法直接从公网访问时,内网穿透技术可以通过一些手段,让公网上的设备能够穿透到内网中的设备,建立起通信连接。 说白…

盘点7款适合团队使用的知识库工具

作为一名技术爱好者和企业管理者,我深知知识库工具在日常工作中的重要性。 无论是个人笔记管理还是企业知识共享,知识库工具都能极大地提升我们的工作效率和信息管理水平。 根据麦肯锡全球研究院报告显示,使用知识库工具可以帮助个人或者企…

windows11 OneDrive禁止开机自启动。

1、先上个图: 开机默认自启,然后设置中,也没有找到可以设置的。 2、然后我们通过任务管理器来处理,右键任务栏: 打开任务管理器: 选中OneDrive,然后点击【禁 用】按钮即可。 或者鼠标右键&…