关于nginx部署vue前端包访问后台同时出现前后端IP和端口的问题

最新推荐文章于 2025-03-18 10:47:55 发布
置顶 最新推荐文章于 2025-03-18 10:47:55 发布
阅读量2.9k 收藏
点赞数
文章标签： nginx vue 部署
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ShadyCB/article/details/102782064
版权
在将Vue项目打包并部署至Nginx后，点击登录按钮调用后台接口时，请求地址错误地指向了前端IP及端口加后端IP及端口，而非预期的直接指向后端API，寻求解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

如题,在把vue打的包部署到nginx上后,出现了一个特别奇怪的问题,
没有任何报错,但是一点击index页面的登录按钮调用后台接口时,我看了下浏览器检查里面的请求地址,是访问前端的IP+端口/后端的Ip+端口,不知道如何解决,请各位大佬帮帮我!!!
在这里插入图片描述

vue项目请求两个服务器地址,vue项目配置后端服务器地址
weixin_30079201的博客
08-09 3965
vue项目配置后端服务器地址 内容精选换一换伸缩组是具有相同属性和应用场景的云服务器和伸缩策略的集合，是启停伸缩策略和进行伸缩活动的基本单位。您可以使用伸缩策略设定的条件自动增加、减少伸缩组中的实例数量，或维持伸缩组中固定的实例数量。创建伸缩组，需要配置最大实例数、最小实例数、期望实例数和负载均衡器等参数。不同可用区支持的云服务器类型可能不同。如果伸缩组中所有可用区均不支持伸缩配置本章节通过示例演...
Nginx部署Vue项目的详细解析
m0_74079648的博客
10-26 1192
通过本文，我们深入探讨了如何使用Nginx部署前端Vue项目。从准备工作、构建Vue项目、上传静态文件到服务器、配置Nginx，到测试并重新加载Nginx，再到高级配置和常见问题与解决方案，我们一步步地完成了整个部署过程。希望这些内容能够帮助你顺利地将Vue项目部署到Nginx服务器上，并在实际工作中进一步优化部署方案。九、总结通过本文，我们深入探讨了如何使用Nginx部署前端Vue项目。
NGINX做前端，页面上的连接却变成后端地址
weixin_34185320的博客
03-11 1116
为什么80%的码农都做不了架构师？>>> ...
vue项目与后端接口部署到同一域名
最新发布
zscsummer的博客
03-18 286
其实项目还是可以分开部署的，vue部署在www.domain.com下，api部署在其他域名或者其他端口下，但是进后台的地址就会和之前不一样。原文链接：https://blog.youkuaiyun.com/fhl760925513/article/details/128311431。// 其他的由vue处理，并重新设置根目录为public下的dist，优先访问index.html。现在新的前后端分离的项目，vue项目和thinkphp大部分都会进行分开部署。// 如果是访问api的，则由thinkphp处理。
vue+axios 开发环境与生产环境配置请求接口，本地开发和线上开发有多个请求地址怎么处理？上线后自动获取ip,不需改请求地址可运用多个项目中
skye_Z的博客
09-12 6499
1. 配置本地开发环境接口： 进入到项目目录config文件中index.js ；当页面有多个不同地址时此可以重定向，下图中会出现报错的就是路径问题， 创建所有httpUrl接口请求。举例后台请求地址为：192.168.11.12:80/omc/login  ,第一个/omc;页面请求地址写为/omc/login，请求地址为192.168.11.11：80/node/list   第二个/...
Nginx 部署 vue 并且 访问 后端 接口
帅气Dee海绵宝宝
04-03 9337
先说一下我遇到的问题： 前端 后端 分离的项目 部署到一个服务器上，前端用的vue，后端用的 springBoot 我之前的想法认为 我的 前端vue 放到Tomcat容器中，然后后端是 springBoot 项目直接启动 在用Nginx 配置代理 后端的 端口 重点：其实 并不是我认为的那样，是我 前端vue 挂到 Nginx 上 然后 Nginx 代理后端 端口号进行访问 步入正题： 后...
vue 通过IP地址解析省市 前端通过后台返回的ip地址解析得到地址
qq_41287158的博客
12-25 1466
vue 通过IP地址解析省市 前端通过后台返回的ip地址解析得到地址 我使用的是太平洋的请求地址： http://whois.pconline.com.cn/ipJson.jsp?ip=182.140.44.44&json=true // 182.140.44.44 是自己要解析的IP地址 因为存在跨域的问题，所以后端转成了我们的域名访问 // ip 传入需要解析的ip即可 export const ipAnalysis = ip => request({ url: baseI
若依ruoyi-vue3虚拟机前后端分离部署到nginx
2301_76996311的博客
09-20 1681
成功启动项目之后，运行maven package，将target文件夹下生成的jar包上传到虚拟机上。打包好之生成了dist文件夹，运行npm run preview预览运行一下打包之后的项目。将打包好的dist文件用1panel上传到对应的目录，默认是/var/www/html。安装好之后使用navicate远程连接到mysql，然后运行后端项目里的sql文件。nginx.conf文件，默认在/etc/nginx/nginx.conf。命令执行成功之后，出现了启动成功的图标即可。
springboot+vue2前后端分离 nginx代理 服务器部署
WOSHIKJ123的博客
11-30 1326
springboot+vue2 前后端分离 nginx代理 服务器部署
nginx部署vue项目
leilei__66的博客
04-02 3103
nginx部署vue项目 1、下载nginx 2、vue项目打包 3、修改nginx的配置
nginx部署Vue和SpringBoot（前后端多服务混合）
weixin_43543882的博客
04-13 769
场景需求 公司目前有三套系统 1、门户网站，SpringBoot搭建的前后端一体框架 2、HR系统，SpringBoot做后端、Vue做前端 3、CRM系统，SpringBoot做后端、Vue做前端 要求三个网站统一部署在服务器80端口上： 1、根路径 / 访问 门户网站 2、路径 /hr/ 访问 HR系统 3、路径 /crm/ 访问 CRM系统 测试环境 下文部署所用的环境均为Mac系统下的本地测试环境 ，服务地址均为 http://localhost/ Nginx配置 Mac下Nginx的配置路径： 静
解决vue中使用proxy配置不同端口和ip接口问题
12-01
问题描述： 　　使用vue-cli创建的项目，开发地址是localhost:8080，由于后台开发不同的模块，导致每个模块请求的ip和端口号不一致 　　例如：http://192.168.10.22:8081  或者 http://192.168.10.30:9999等 解决问题： 　　在vue.config.js中配置不同的端口号 　　module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/', devServer: { open: true, proxy: {
Nginx 部署多个vue项目 （同IP，同端口，不同路径）
svallll的博客
12-18 3161
一.Vue项目中的配置 1.配置vue中conf下的index.js，配置如下： build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), ...
Nginx做代理时X-Forwarded-For信息头的处理
weixin_30443813的博客
10-27 956
如今利用nginx做负载均衡的实例已经很多了，针对不同的应用场合，还有很多需要注意的地方，本文要说的就是在通过CDN 后到达nginx做负载均衡时请求头中的X-Forwarded-For项到底发生了什么变化。下图为简单的web架构图： 先来看一下X-Forwarded-For的定义：X-Forwarded-For:简称XFF头，它代表客户端，也就是HTT...
nginx中，配置ip多端口访问
热门推荐
大洋
10-05 1万+
1、添加server server { listen 8001; server_name localhost; root /home/ebayerp; location / { index index.html index.htm index.php; } loca...
通过nginx代理vue，vue再访问后端时出错记录
Lancer0001的博客
03-23 3681
项目场景： 项目场景：项目上线测试环境 使用nginx代理出现问题 问题描述 通过nginx代理vue，vue再访问后端时，后端地址被替换成为了代理地址 例如 ： 代理地址为 127.0.0.1:8081 前端访问地址为 127.0.0.1:8888 后端访问地址为 127.0.0.1:8066 此时，正常访问的后台接口应该为 127.0.0.1:8066/xxx/xxx,但我此时的情况是 127.0.0.1:8081/xxx/xxx 原因分析： 提示：这里填写问题的分析： 我理解的，前端发了请求，
vue链接自动加ip端口号问题
weixin_50061268的博客
05-23 858
vue链接自动加ip端口号问题 点击跳转到：localhost:8080/www.baidu.com/ 解决：写成 有些文章写错了，一定要加 http:// 而不是 http//:
nginx作为代理 后端服务器ip问题
企鹅漫步
05-13 3711
由于采用nginx+nginx的方式，导致后端
vue项目请求后台接口跨域
huanhuan03的博客
01-08 3431
vue请求后台接口跨域 解决1：proxyTable 解决2：nginx
windows nginx部署vue项目请求前端500
12-26
在Windows上部署Nginx并运行Vue.js项目的常见问题中，如果遇到前端请求返回500错误，这通常意味着服务器内部出现了错误。以下是可能的原因及解决步骤： 1. **权限问题**：检查Nginx配置文件（如`nginx.conf`）是否...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值