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