關(guān)于vite proxy跨域問題的解決
更新時間：2024年03月12日 09:50:53 作者：IICOOM
這篇文章主要介紹了關(guān)于vite proxy跨域問題的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vite proxy如何解決跨域問題
場景描述
本地起了兩個服務(wù)
1.前端vue項目跑在http://localhost:5173端口
2.后端接口服務(wù)跑在http://localhost:3000端口
前端項目請求后端接口時，瀏覽器給出了跨域的提示，接口請求失敗。
下面給出通過配置前端代理解決跨域問題方法
如果你是vite搭建的vue3項目，找到vite.config.ts，添加下面內(nèi)容：
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
}
},
})
關(guān)鍵的點來了，你的前端發(fā)起請求的baseUrl應(yīng)該是 http://localhost:5173/api
舉個例子：
前端要請求后端http://localhost:3000/userlist 接口，那么你發(fā)起的請求應(yīng)該是下面的樣子：
http://localhost:5173/api/userlist
這樣前端就是從相同的host 并且相同的port發(fā)起的請求，代理通過前綴"/api"匹配的你要轉(zhuǎn)發(fā)的請求，轉(zhuǎn)發(fā)到’http://localhost:3000’真正的后端服務(wù)，并且把多余的前綴給你替換掉。
vue3 vite3 解決復(fù)雜跨域
vue3在axios發(fā)送post請求時，容易遇到復(fù)雜跨域，會先發(fā)送options的預(yù)請求，再發(fā)送post請求，options請求搞了很久，無法被后端識別通過，只能想辦法用proxy代理解決
vite.config.js中添加一下代碼
export default defineConfig({
plugins: [
vue(),
],
server: {
host: '10.10.159.234',//本機(jī)ip
port: 8080,
//open: false, //自動打開
//base: "./ ", //生產(chǎn)環(huán)境路徑
proxy: {
'/api': {
target: 'http://10.56.33.13', //實際請求地址
changeOrigin: true,
//rewrite: (path) => path.replace(/^\/api/, '')根據(jù)自己api情況選擇這條
},
}
}
});
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中自定義一個鈴聲提示音組件的實現(xiàn)以及使用方法，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下2022-01-01
vite+vue3項目中svg圖標(biāo)組件封裝的過程詳解
這篇文章主要介紹了vite+vue3項目中svg圖標(biāo)組件封裝的過程,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
本文通過實例代碼給大家詳細(xì)分享了Vue父組件向子組件傳值的過程以及關(guān)鍵點講解，一起學(xué)習(xí)參考下吧。2018-02-02
這篇文章主要介紹了Vue-組件自定義事件的綁定和解綁，文中有詳細(xì)的圖文實例，對學(xué)習(xí)或工作有一定的參考價值，需要的小伙伴可以閱讀下2023-05-05
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Vant實現(xiàn)簡單的登錄功能,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
解決在Vue中使用axios POST請求變成OPTIONS的問題
這篇文章主要介紹了解決在Vue中使用axios POST請求變成OPTIONS的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實現(xiàn)懸浮框自由移動+錄音功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動手嘗試一下2022-07-07
這篇文章主要介紹了Vue安裝瀏覽器開發(fā)工具步驟詳解，本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了解決.vue文件url引用文件的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
vue項目中v-model父子組件通信的實現(xiàn)詳解
vue.js，是一個構(gòu)建數(shù)據(jù)驅(qū)動的 web 界面的庫。Vue.js 的目標(biāo)是通過盡可能簡單的 API 實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。下面這篇文章主要給大家介紹了關(guān)于vue項目中v-model父子組件通信實現(xiàn)的相關(guān)資料，需要的朋友可以參考下。2017-12-12