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

news2024/11/26 17:34:47

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.coloradmin.cn/o/1873127.html

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

相关文章

2024我们该学习大模型吗?

一、引言 在快速变化的科技行业中,人工智能(AI)大模型已成为研究和应用的热点。随着AI技术的不断进步,特别是在自然语言处理、计算机视觉和机器学习平台等领域,许多专业人士开始将目光投向AI大模型的开发和应用。 二…

MobPush iOS端海外推送最佳实现

推送注册 在AppDelegate里进行SDK初始化&#xff08;也可以在Info.plist文件中进行AppKey&#xff0c;AppSecret的配置&#xff09;并对通知功能进行注册以及设置推送的环境和切换海外服务器等&#xff0c;参考如下步骤代码&#xff1a; <span style"background-colo…

[漏洞复现] MetInfo5.0.4文件包含漏洞

[漏洞复现] MetInfo5.0.4文件包含漏洞 MetInfo5.0.4 漏洞代码审计 漏洞出现在about/index.php中&#xff0c;因为利用了动态地址&#xff0c;所以存在漏洞。 漏洞检查语句&#xff08;&#xff01;192.168.109.100是我的服务器ip&#xff0c;需要换成自己的&#xff09;&…

[BUUCTF从零单排] Web方向 02.Web入门篇之『常见的搜集』解题思路(dirsearch工具详解)

这是作者新开的一个专栏《BUUCTF从零单排》&#xff0c;旨在从零学习CTF知识&#xff0c;方便更多初学者了解各种类型的安全题目&#xff0c;后续分享一定程度会对不同类型的题目进行总结&#xff0c;并结合CTF书籍和真实案例实践&#xff0c;希望对您有所帮助。当然&#xff0…

jupyter安装及使用

引言 之前安装了anaconda&#xff0c;然后conda的环境管理里面就有jupyter&#xff0c;但是我一直没用过。 但是我用过colab&#xff0c;从使用体验上来说&#xff0c;非常相似&#xff0c;这次给服务器装了一个jupyter&#xff0c;然后我本地连接远程的来用&#xff0c;还挺…

一种502 bad gateway nginx/1.18.0的解决办法

背景:上线的服务突然挂掉了 step1&#xff0c;去后端日志查看&#xff0c;发现并无异常&#xff0c;就是请求无法被接收 step2&#xff0c;查看了nginx的错误日志&#xff0c;发现该文件为空 step3&#xff0c;查看了niginx的运行日志&#xff0c;发现了以下问题 [error] 38#…

C++ 106 之 list容器

#include <iostream> #include <string> using namespace std; // #include <vector> // 容器头文件 #include <algorithm> // 标准算法头文件 #include <list>void printList(const list<int> & list1){for(list<int>::const…

半小时速通Python爬虫!GitHub开源的Python爬虫入门教程

今天给小伙伴们带来了一篇详细介绍 Python 爬虫入门的教程&#xff0c;从实战出发&#xff0c;适合初学者。 小伙伴们只需在阅读过程紧跟文章思路&#xff0c;理清相应的实现代码&#xff0c;30 分钟即可学会编写简单的 Python 爬虫。 这篇 Python 爬虫教程主要讲解以下 5 部…

flutter开发实战-ListWheelScrollView与自定义TimePicker时间选择器

flutter开发实战-ListWheelScrollView与自定义TimePicker 最近在使用时间选择器的时候&#xff0c;需要自定义一个TimePicker效果&#xff0c;当然这里就使用了ListWheelScrollView。ListWheelScrollView与ListView类似&#xff0c;但ListWheelScrollView渲染效果类似滚筒效果…

招聘,短信与您:招聘人员完整指南

招聘人员面临的最大挑战之一就是沟通和联系候选人。为何?我们可以从以下原因开始&#xff1a;候选人通常被太多的招聘人员包围&#xff0c;试图联系他们&#xff0c;这使得你很难吸引他们的注意。在招聘过程的不同阶段&#xff0c;根据不同的工作量&#xff0c;让申请人保持最…

墨刀原型-单选按钮场景交互

画原型过程中&#xff0c;会遇到单选或多选的交互场景 这时就可以直接在基础组件部分&#xff0c;拉取单选按钮直接使用&#xff0c;只需要完成对应的交互事件就可实现交互 首先先说单选按钮实现交互 拉取一个单选组件&#xff0c;右侧可调整样式尺寸&#xff0c;在选项部分&…

OpenGL3.3_C++_Windows(23)

伽ga马校正 物理亮度 光子数量 线性空间&#xff1a;光子数(亮度&#xff09;和颜色值的线性关系人眼感知的亮度&#xff1a;对比较暗的颜色变化更敏感&#xff0c;感知亮度基于人的感觉非线性空间&#xff1a;光子数(亮度&#xff09;和 颜色值^2.2&#xff0c;恰好符合屏幕…

Navicat数据库软件免费了!推出Navicat Premium Lite

2024年6月26日&#xff0c;数据库管理工具领域的知名品牌Navicat&#xff0c;推出其免费版本——Navicat Premium Lite&#xff0c;用户可从Navicat官网下载体验这款软件。 这款针对入门级用户的数据库管理开发工具&#xff0c;支持基础的数据库管理和协同合作功能&#xff0c…

仓颉开发入门初体验

作者&#xff1a;黄林晴 顺便吆喝一声&#xff0c;如果你计算机、软件工程、电子等相关专业本科及以上学历&#xff0c;欢迎来共事。前端/后端/测试均可投&#xff0c;技术大厂。 前言 在刚刚召开的华为开发者大会&#xff08;HDC 2024&#xff09;上&#xff0c;华为内部研…

观测到“量子反常霍尔效应”,为何就被称为“离诺奖最近的物理学家”?

内容来源&#xff1a;量子前哨&#xff08;ID&#xff1a;Qforepost&#xff09; 文丨浪味仙 排版丨沛贤 深度好文&#xff1a;2000字丨8分钟阅读 6 月 24 日&#xff0c;2023 年度国家最高科学技术奖在京揭晓&#xff0c;61岁的凝聚态物理领域科学家、清华大学薛其坤院士荣…

基于改进天鹰优化算法(IAO)优化BP神经网络数据分类预测(IAO-BP)

改进天鹰优化算法(IAO)见&#xff1a;【智能优化算法】改进的AO算法(IAO)-CSDN博客 BP神经网络的数据分类预测&#xff1a;基于BP神经网络的数据分类预测-CSDN博客 代码原理 基于改进天鹰优化算法&#xff08;IAO&#xff09;优化BP神经网络数据分类预测&#xff08;IAO-BP&…

win系统缺少vcruntime140.dll文件的解决办法,亲测实用的解决方法

运行软件的时候提示无法启动此程序&#xff0c;因为计算机中丢失 vcruntime140.dll 尝试重新安装该程序以解决此问题&#xff0c;其实主要因为vcruntime140.dll丢失&#xff0c;如果您启动程序并收到 Windows 无法找到 vcruntime140.dll DLL 或它丢失的错误&#xff0c;您可以使…

# Kafka_深入探秘者(10):kafka 监控

Kafka_深入探秘者&#xff08;10&#xff09;&#xff1a;kafka 监控 一、kafka JMX 1、JMX &#xff1a;全称 Java Managent Extension 在实现 Kafka 监控系统的过程中&#xff0c;首先我们要知道监控的数据从哪来&#xff0c;Kafka 自身提供的监控指标(包括 broker 和主题的…

如何进行员工 OKR 反馈?

目标和关键结果框架是一种协作性的目标设定方法&#xff0c;帮助团队设定理想的目标&#xff08;目标&#xff09;&#xff0c;并有具体的、可衡量的行动项目&#xff0c;称为关键结果。实施 OKR 为一个富有成效的、以目标为导向的环境奠定了基础&#xff0c;从而消除了提供反馈…

报名通道开启!2024国际燃气轮机运维大会将于10月登陆花城

驱动未来运维技术革新 共筑燃机生态新纪元 | 2024国际燃气轮机运维大会报名通道正式开启 随着全球燃气轮机装备技术不断升级与“双碳”战略的深入&#xff0c;全球燃气轮机市场规模也将进一步扩大&#xff0c;预计到2033年达到536.7亿美元左右&#xff0c;2023-2033年预测期间年…