vue腳手架配置代理請求

在 Vue 腳手架中,可以通過配置vue.config.js文件來設置代理請求,以解決跨域問題或實現其他代理需求。以下是兩種常見的配置方式:

方法一:
在vue.config.js中添加如下配置:

module.exports = {devServer: {proxy: 'http://localhost:5000' // 這里填寫后端服務器的地址和端口}
};

說明:
優點是配置簡單,請求資源時直接發送到前端的 8080 端口即可。
缺點是不能配置多個代理,且不能靈活地控制請求是否走代理。其工作方式是優先匹配前端資源,如果請求了前端不存在的資源,那么該請求會轉發給服務器。

方法二:
編寫vue.config.js配置具體代理規則:

module.exports = {devServer: {proxy: {'/api1': { // 匹配所有以'/api1'開頭的請求路徑target: 'http://localhost:5000', // 代理目標的基礎路徑changeOrigin: true,pathRewrite: {'^/api1': ''} },'/api2': { // 匹配多個代理,可添加更多target: 'http://localhost:5001', changeOrigin: true,pathRewrite: {'^/api2': ''} }}}
};

上述配置中,/api1和/api2是請求前綴,可以根據實際需求進行修改。target是代理目標的基礎路徑,即后端服務器的地址。changeOrigin用于控制請求頭中的 host 值,一般設置為true,表示代理服務器向服務器發送請求時會偽裝 host 頭。pathRewrite是一個對象,其中的鍵值對用于重寫請求路徑。例如,‘^/api1’: ''表示將前綴/api1替換為空字符串。

說明:

優點是可以配置多個代理,且可以靈活地控制請求是否走代理。
缺點是配置略微繁瑣,請求資源時必須加上前綴。
配置完成后,重啟 Vue 應用以使代理配置生效。在代碼中發送請求時,需要使用配置的前綴加上具體的接口路徑。例如,對于上述配置中的/api1前綴,請求接口/user/list時,實際發送的請求地址應為http://localhost:8080/api1/user/list。
請注意,這里的后端服務器地址和端口需要根據你的實際情況進行修改。如果你的后端服務器運行在不同的主機或端口上,將相應的值替換到配置中即可。此外,確保 Vue 腳手架已經正確安裝并且項目能夠正常運行。如果在配置過程中遇到問題,可以檢查配置的準確性、服務器是否正常運行以及網絡連接等方面。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/45590.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/45590.shtml
英文地址,請注明出處:http://en.pswp.cn/web/45590.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

《信息與電腦(理論版)》是什么級別的期刊?是正規期刊嗎?能評職稱嗎?

問題解答 問:《信息與電腦(理論版)》是不是核心期刊? 答:不是,是知網收錄的正規學術期刊。 問:《信息與電腦(理論版)》級別? 答:省級。主管單位:北京電子控股有限責任公司 主辦…

AI安全入門-人工智能數據與模型安全

參考 人工智能數據與模型安全 from 復旦大學視覺與學習實驗室 文章目錄 0. 計算機安全學術知名公眾號1. 概述數據安全模型安全 3. 人工智能安全基礎3.1 基本概念攻擊者攻擊方法受害者受害數據受害模型防御者防御方法威脅模型目標數據替代數據替代模型 3.2 威脅模型3.2.1 白盒威…

實踐致知第16享:設置Word中某一頁橫著的效果及操作

一、背景需求 小姑電話說:現在有個word文檔,里面有個表格太長(如下圖所示),希望這一個設置成橫的,其余頁還是保持豎的! 二、解決方案 1、將鼠標放置在該頁的最前面閃爍,然后選擇“頁面”》“↘…

Python面經

文章目錄 Python基本概念1. Python是**解釋型**語言還是**編譯型**語言2. Python是**面向對象**語言還是面向過程語言3. Python基本數據類型4.append和 extend區別5.del、pop和remove區別6. sort和sorted區別介紹一下Python 中的字符串編碼is 和 的區別*arg 和**kwarg作用淺拷…

Electron 進程間通信

文章目錄 渲染進程到主進程(單向)渲染進程到主進程(雙向)主進程到渲染進程 (單向,可模擬雙向) 渲染進程到主進程(單向) send (render 發送)on &a…

【Stable Diffusion】(基礎篇三)—— 圖生圖基礎

圖生圖基礎 本系列筆記主要參考B站nenly同學的視頻教程,傳送門:B站第一套系統的AI繪畫課!零基礎學會Stable Diffusion,這絕對是你看過的最容易上手的AI繪畫教程 | SD WebUI 保姆級攻略_嗶哩嗶哩_bilibili 本文主要講解如何使用S…

客戶端與服務端之間的通信連接

目錄 那什么是Socket? 什么是ServerSocket? 代碼展示: 代碼解析: 補充: 輸入流(InputStream): 輸出流(OutputStream): BufferedReader 是如何提高讀取效率的&a…

K8s集群初始化遇到的問題

kubectl describe pod coredns-545d6fc579-s9g5s -n kube-system 找到原因1:CoreDNS Pod 處于 Pending 狀態的原因是集群中的節點都帶有 node.kubernetes.io/not-ready 污點 journalctl -u kubelet -f 14:57:59.178592 3553 remote_image.go:114] "PullIma…

《簡歷寶典》12 - 簡歷中“項目經歷”,內功學習 - 下篇

這一小節呢,我們繼續說簡歷中 “項目經歷” 的一些內功心法。因為項目經歷比較核心,所以說完了,內功呢,我們會著重說一下 實戰部分。 目錄 1 所用技術的考慮 2 自我成長的突出 3 綜合使用STAR法則 4 小節 1 所用技術的考慮 …

如何評估AI模型:評估指標的分類、方法及案例解析

如何評估AI模型:評估指標的分類、方法及案例解析 引言第一部分:評估指標的分類第二部分:評估指標的數學基礎第三部分:評估指標的選擇與應用第四部分:評估指標的局限性第五部分:案例研究第六部分&#xff1a…

pear-admin-fast項目修改為集成PostgreSQL啟動

全局搜索代碼中的sysdate(),修改為now() 【前者是mysql特有的,后者是postgre特有的】修改application-dev.yml中的數據庫url使用DBeaver把mysql中的數據庫表導出csv,再從postgre中導入csv腳本轉換后出現了bpchar(xx)類型,那么一定…

用友U8存貨分類按層級取數SQL語句

SELECT cInvCCode 分類編碼, cInvCName 分類名稱, iInvCGrade 分類層級, ss.bInvCEnd 是否是末級, aa.* FROM InventoryClass ss LEFT JOIN ( SELECT * FROM ( SELECT cInvCCode AS 一級分類編碼, …

python數據可視化(6)——繪制散點圖

課程學習來源:b站up:【螞蟻學python】 【課程鏈接:【【數據可視化】Python數據圖表可視化入門到實戰】】 【課程資料鏈接:【鏈接】】 Python繪制散點圖查看BMI與保險費的關系 散點圖: 用兩組數據構成多個坐標點,考察…

如何降低老年人患帕金森病的風險?

降低老年人患帕金森病風險的方法 避免接觸有害物質:長期接觸某些化學物質、農藥或其他有害物質可能會增加患帕金森病的風險。應減少這些物質的暴露,例如在工作或生活中采取防護措施。 健康飲食:均衡飲食,多吃富含抗氧化劑的食物&a…

做了一個萬能搜索框

最近給網頁做了一個搜索框,現在搜索比以前更加方便了,下面簡單介紹一下如何使用 我們進入網頁版(app.zyjj.cc)點擊右上角的搜索就可以看到這個新版的搜索框了 目前支持中文、拼音、首字母等多種搜索方式,大家可以隨意…

【Python】Python-docx使用實例 科技檔案封面批量生成

使用背景 根據excel表中的信息,按照word模板格式,每條信息生成一個對應的模板及文件名。 我這里的情況是將科技檔案的封面格式按照案卷表的明細批量生成。 (單位的檔案軟件太雞肋了,沒有這個功能) 代碼整篇 工程檔…

【Linux】常見指令(下)

【Linux】常見指令(下) 通配符 *man指令cp指令echo指令cat指令(簡單介紹)cp指令 mv指令alias指令which ctrl ccat指令linux下一切皆文件 more指令less指令head指令tail指令管道 通配符 ‘*’ 通配符’ *‘,是可以匹配…

4 C 語言控制流與循環結構的深入解讀

目錄 1 復雜表達式的計算過程 2 if-else語句 2.1 基本結構及示例 2.2 if-else if 多分支 2.3 嵌套 if-else 2.4 懸空的 else 2.5 注意事項 2.5.1 if 后面不要加分號 2.5.2 省略 else 2.5.3 省略 {} 2.5.4 注意點 3 while 循環 3.1 一般形式 3.2 流程特點 3.3 注…

Dynamic多數據源

有時候我們在項目中,可能會遇到需要同時使用多個數據庫連接的情況,這個時候可以使用MyBatis-Plus的dynamic多數據源的配置。但其實MyBatis-Plus官方還提供了mybatis-mate組件,但是他是付費的企業組件。 官方文檔: 多數據源支持 …

識別視頻中的人數并統計出來

目的: 使用Python和pysimpleguil以及opencv寫一個統計人流量的軟件。要求:1 加載選定的視頻 2 通過形態學特征識別人,3統計人數并且在界面上顯示出來,4 保存識別出人數的信息。 步驟 1: 安裝必要的庫 首先,確保你已經安裝了Python。然后,安裝PySimpleGUI和OpenCV。你可…