項(xiàng)目部署后前端vue代理失效問題解決辦法
title：
工作日記，前段后分離項(xiàng)目，在部署時遇到的問題，Vue項(xiàng)目打包成dist文件之后放在服務(wù)器上，通過運(yùn)行java-jar包，在application.yml中引入靜態(tài)資源的方式訪問前端。如下圖所示：
問題1：
前端頁面是可以訪問到了，但是后端訪問不到，在本地中運(yùn)行就可以。
首先前端我在vite.config.ts 配置的代理服務(wù)器，在本地啟動起來是可以的并且不會有跨域問題，放在服務(wù)器上代理就失效了。
答案：
我們將項(xiàng)目打包成dist靜態(tài)文件后，代理服務(wù)器就被抽離出來了，所以訪問不到（網(wǎng)上看到的）
解決：
如果是通過上圖中的方式引入的靜態(tài)文件，則不需要配置代理，直接訪問后端接口即可，否則就需要配置代理服務(wù)器nginx。
nginx簡介：
什么是nginx:
Nginx ("engine x"）是一個高性能的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個并發(fā)連接數(shù)。·
反向代理
server {
listen 8089; #監(jiān)聽的端口號
server_name localhost; #瀏覽器通過訪問這個地址和端口就能請求到nginx
location / {
proxy_pass http://127.0.0.1:5173/; #這個為前端項(xiàng)目的訪問地址
#root html;
#index index.html index.htm;
}
location /api/ {
#前端向后端發(fā)出地址請求http://localhost:8089/api/user/login
#就會將地址替換成 http://localhost:8050/user/login
proxy_pass http://localhost:8050/;
}總結(jié)
到此這篇關(guān)于項(xiàng)目部署后前端vue代理失效問題解決辦法的文章就介紹到這了,更多相關(guān)前端vue代理失效解決內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue Element前端應(yīng)用開發(fā)之常規(guī)Element界面組件
在我們開發(fā)BS頁面的時候，往往需要了解常規(guī)界面組件的使用，小到最普通的單文本輸入框、多文本框、下拉列表，以及按鈕、圖片展示、彈出對話框、表單處理、條碼二維碼等等，本篇隨筆基于普通表格業(yè)務(wù)的展示錄入的場景介紹這些常規(guī)Element組件的使用2021-05-05
這篇文章主要介紹了Vue組件系列開發(fā)之模態(tài)框，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
下面小編就為大家分享一篇基于Vuex無法觀察到值變化的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要幫助大家簡單理解vue中實(shí)例屬性vm.$els,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
文章描述了在使用官網(wǎng)命令創(chuàng)建Nuxt3項(xiàng)目時遇到的問題,通過分析命令,推測問題出在拉取項(xiàng)目模板失敗,解決方法是手動訪問并下載項(xiàng)目模板,解壓后按照官網(wǎng)教程安裝依賴并啟動,最終成功解決問題2024-12-12
VUE2.0+ElementUI2.0表格el-table實(shí)現(xiàn)表頭擴(kuò)展el-tooltip
這篇文章主要介紹了VUE2.0+ElementUI2.0表格el-table實(shí)現(xiàn)表頭擴(kuò)展el-tooltip，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
Vue+UpLoad實(shí)現(xiàn)上傳預(yù)覽和刪除圖片的實(shí)踐
本文主要介紹了Vue+UpLoad實(shí)現(xiàn)上傳預(yù)覽和刪除圖片的實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
vue3的頁面跳轉(zhuǎn)有兩種方式，第一種是標(biāo)簽內(nèi)跳轉(zhuǎn)，第二種是編程式路由導(dǎo)航，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2023-05-05
Element-plus封裝搜索組件的實(shí)現(xiàn)
在后臺管理系統(tǒng)中,經(jīng)常需要在多個頁面中使用搜索功能,本文就來介紹一下Element-plus封裝搜索組件的實(shí)現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-08-08
element-ui中的clickoutside點(diǎn)擊空白隱藏元素
這篇文章主要為大家介紹了element-ui中的clickoutside點(diǎn)擊空白隱藏元素示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03