项目部署后前端vue代理失效问题解决办法
更新时间：2024年02月18日 11:27:05 作者：执着DS
这篇文章主要给大家介绍了关于项目部署后前端vue代理失效问题的解决办法,文中通过图文以及代码示例将解决的办法介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
title：
工作日记，前段后分离项目，在部署时遇到的问题，Vue项目打包成dist文件之后放在服务器上，通过运行java-jar包，在application.yml中引入静态资源的方式访问前端。如下图所示：
问题1：
前端页面是可以访问到了，但是后端访问不到，在本地中运行就可以。
首先前端我在vite.config.ts 配置的代理服务器，在本地启动起来是可以的并且不会有跨域问题，放在服务器上代理就失效了。
答案：
我们将项目打包成dist静态文件后，代理服务器就被抽离出来了，所以访问不到（网上看到的）
解决：
如果是通过上图中的方式引入的静态文件，则不需要配置代理，直接访问后端接口即可，否则就需要配置代理服务器nginx。
nginx简介：
什么是nginx:
Nginx ("engine x"）是一个高性能的HTTP和反向代理服务器,特点是占有内存少，并发能力强，事实上nginx.的并发能力确实在同类型的网页服务器中表现较好Nginx,专为性能优化而开发,性能是其最重要的考量,实现上非常注重效率，能经受高负载的考验,有报告表明能支持高达50,000个并发连接数。·
反向代理
server {
listen 8089; #监听的端口号
server_name localhost; #浏览器通过访问这个地址和端口就能请求到nginx
location / {
proxy_pass http://127.0.0.1:5173/; #这个为前端项目的访问地址
#root html;
#index index.html index.htm;
}
location /api/ {
#前端向后端发出地址请求http://localhost:8089/api/user/login
#就会将地址替换成 http://localhost:8050/user/login
proxy_pass http://localhost:8050/;
}总结
到此这篇关于项目部署后前端vue代理失效问题解决办法的文章就介绍到这了,更多相关前端vue代理失效解决内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue Element前端应用开发之常规Element界面组件
在我们开发BS页面的时候，往往需要了解常规界面组件的使用，小到最普通的单文本输入框、多文本框、下拉列表，以及按钮、图片展示、弹出对话框、表单处理、条码二维码等等，本篇随笔基于普通表格业务的展示录入的场景介绍这些常规Element组件的使用2021-05-05
这篇文章主要介绍了Vue组件系列开发之模态框，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
下面小编就为大家分享一篇基于Vuex无法观察到值变化的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要帮助大家简单理解vue中实例属性vm.$els,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
文章描述了在使用官网命令创建Nuxt3项目时遇到的问题,通过分析命令,推测问题出在拉取项目模板失败,解决方法是手动访问并下载项目模板,解压后按照官网教程安装依赖并启动,最终成功解决问题2024-12-12
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
这篇文章主要介绍了VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
本文主要介绍了Vue+UpLoad实现上传预览和删除图片的实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
vue3的页面跳转有两种方式，第一种是标签内跳转，第二种是编程式路由导航，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2023-05-05
在后台管理系统中,经常需要在多个页面中使用搜索功能,本文就来介绍一下Element-plus封装搜索组件的实现,具有一定的参考价值,感兴趣的可以了解一下2024-08-08
element-ui中的clickoutside点击空白隐藏元素
这篇文章主要为大家介绍了element-ui中的clickoutside点击空白隐藏元素示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
最新评论