項(xiàng)目部署后前端vue代理失效問題解決辦法
title：
工作日記，前段后分離項(xiàng)目，在部署時(shí)遇到的問題，Vue項(xiàng)目打包成dist文件之后放在服務(wù)器上，通過運(yùn)行java-jar包，在application.yml中引入靜態(tài)資源的方式訪問前端。如下圖所示：
問題1：
前端頁面是可以訪問到了，但是后端訪問不到，在本地中運(yùn)行就可以。
首先前端我在vite.config.ts 配置的代理服務(wù)器，在本地啟動(dòng)起來是可以的并且不會(huì)有跨域問題，放在服務(wù)器上代理就失效了。
答案：
我們將項(xiàng)目打包成dist靜態(tài)文件后，代理服務(wù)器就被抽離出來了，所以訪問不到（網(wǎng)上看到的）
解決：
如果是通過上圖中的方式引入的靜態(tài)文件，則不需要配置代理，直接訪問后端接口即可，否則就需要配置代理服務(wù)器nginx。
nginx簡(jiǎn)介：
什么是nginx:
Nginx ("engine x"）是一個(gè)高性能的HTTP和反向代理服務(wù)器,特點(diǎn)是占有內(nèi)存少，并發(fā)能力強(qiáng)，事實(shí)上nginx.的并發(fā)能力確實(shí)在同類型的網(wǎng)頁服務(wù)器中表現(xiàn)較好Nginx,專為性能優(yōu)化而開發(fā),性能是其最重要的考量,實(shí)現(xiàn)上非常注重效率，能經(jīng)受高負(fù)載的考驗(yàn),有報(bào)告表明能支持高達(dá)50,000個(gè)并發(fā)連接數(shù)。·
反向代理
server {
listen 8089; #監(jiān)聽的端口號(hào)
server_name localhost; #瀏覽器通過訪問這個(gè)地址和端口就能請(qǐng)求到nginx
location / {
proxy_pass http://127.0.0.1:5173/; #這個(gè)為前端項(xiàng)目的訪問地址
#root html;
#index index.html index.htm;
}
location /api/ {
#前端向后端發(fā)出地址請(qǐng)求http://localhost:8089/api/user/login
#就會(huì)將地址替換成 http://localhost:8050/user/login
proxy_pass http://localhost:8050/;
}總結(jié)
到此這篇關(guān)于項(xiàng)目部署后前端vue代理失效問題解決辦法的文章就介紹到這了,更多相關(guān)前端vue代理失效解決內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文詳細(xì)介紹了如何在Vue項(xiàng)目中集成和使用富文本編輯框,并分享了一些實(shí)踐經(jīng)驗(yàn),介紹了為什么需要富文本編輯框,Vue中常用的富文本編輯器,以及如何安裝、配置和使用Vue-Quill-Editor,本文還提供了一些基本的配置示例,幫助開發(fā)者在實(shí)際項(xiàng)目中根據(jù)需求進(jìn)行更多探索和定制2024-10-10
這篇文章主要介紹了Vue打印錯(cuò)誤日志問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了Vue計(jì)算屬性的學(xué)習(xí)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
使用VUE3開發(fā)很久了,但一直沒進(jìn)行總結(jié)和記錄,下面這篇文章主要給大家介紹了關(guān)于從零開始搭建vue3項(xiàng)目的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
在vue項(xiàng)目中和后臺(tái)交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫(kù),它是基于promise的http庫(kù),可運(yùn)行在瀏覽器端和node.js中,下面這篇文章主要給大家介紹了關(guān)于Vue中Axios的封裝與接口管理的相關(guān)資料,需要的朋友可以參考下2022-03-03
這篇文章主要為大家介紹了Vue插槽解決父子組件通信，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
在Vue中解決跨域問題有多種方法,今天通過本文給大家介紹幾種比較常見的方法，對(duì)vue解決跨域問題感興趣的朋友跟隨小編一起看看吧2023-05-05
Vue項(xiàng)目中Api的組織和返回?cái)?shù)據(jù)處理的操作
這篇文章主要介紹了Vue項(xiàng)目中Api的組織和返回?cái)?shù)據(jù)處理的操作，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
這篇文章主要為大家介紹了vue與ant-tree結(jié)合偽造懶加載并可以查詢實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
本篇文章主要介紹了基于Vue2x的圖片預(yù)覽插件的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05