Vite代理如何解決跨域問題詳解
前言
我們?cè)诰帉懬岸隧?xiàng)目的時(shí)候，經(jīng)常會(huì)遇到跨域的問題，當(dāng)我們?cè)L問后端 API 的 URL 路徑時(shí)，只要域名、端口或訪問協(xié)議（如 HTTP 和 HTTPS）有一項(xiàng)不同，就會(huì)被瀏覽器認(rèn)定為跨域。另外我們也會(huì)經(jīng)常重復(fù)編寫后端的域名，例如 https://example.com/api/some_end_point，https://example.com/api/other_end_point，針對(duì)這兩種情況，可以直接用同一個(gè)配置來解決，即代理配置。
不管是 Vite 還是 Webpack，這些打包工具都支持設(shè)置前端代理，它們能夠把對(duì)某一段 URL 的訪問直接轉(zhuǎn)換成另一個(gè)真實(shí)的后端 API 地址，這樣前后端就視為使用了相同的域名、協(xié)議和端口，就避免了跨域的問題，還能避免繁瑣的反復(fù)編寫域名。
1.Vite Proxy
我們這里以 Vite 的配置為例，來看一下如何給 API 請(qǐng)求設(shè)置代理。在 Vite 編寫的項(xiàng)目里邊，有一個(gè) vite.config.js配置文件，里邊是關(guān)于 Vite 的配置項(xiàng)，可以在里邊配置代理。假如我們前端項(xiàng)目路徑為 http://localhost:3000，需要代理所有以 /api 開頭的 API 請(qǐng)求，把它轉(zhuǎn)發(fā)到 http://localhost:3001，并且后端的 API 路徑中不帶 /api前綴，需要自動(dòng)去掉 /api前綴，如下圖所示：
下面是端口從5173代理到8080
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
'/api': {
target: 'http://127.0.0.1:8080', //目標(biāo)url
changeOrigin: true, //支持跨域
rewrite: (path) => path.replace(/^\/api/, ""),
//重寫路徑,替換/api
}
}
}
})注意我先配置了axios的baseurl
// 請(qǐng)求
const service = axios.create({
baseURL: '/api',
timeout: 10000
})
也就是說 我請(qǐng)求request.get("/all") ，會(huì)解析成http://127.0.0.1:5173/api/all。
這里我請(qǐng)求http://127.0.0.1:5173/api/all 這是前端的請(qǐng)求。
http://127.0.0.1:8080/all 這里對(duì)應(yīng)后端的接口。
前端
后端
2.參考文章
總結(jié)
到此這篇關(guān)于Vite代理如何解決跨域問題的文章就介紹到這了,更多相關(guān)Vite代理解決跨域問題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue截取視頻第一幀的圖片問題,基本就是用cavas進(jìn)行繪制，解決一下跨域問題，截視頻第一幀，然后根據(jù)視頻原本的寬高進(jìn)行繪制，最后轉(zhuǎn)一下圖片格式即可，需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了vue獲取驗(yàn)證碼倒計(jì)時(shí)組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
vue解決this.$refs.xx在mounted中獲取DOM元素為undefined問題
這篇文章主要介紹了vue解決this.$refs.xx在mounted中獲取DOM元素為undefined問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue?的核心功能之一在于?props?的使用,props?是我們?cè)?Vue?中從父組件到子組件傳遞數(shù)據(jù)的方式,但并非所有?props?都是一樣的,本文我們會(huì)深入學(xué)習(xí)這三種不同類型的?props,看看它們有何不同,以及何時(shí)使用它們,需要的朋友可以參考下2024-03-03
基于canvas實(shí)現(xiàn)手寫簽名（vue）
這篇文章主要為大家詳細(xì)介紹了基于canvas實(shí)現(xiàn)簡(jiǎn)易的手寫簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
本文主要介紹了Vue實(shí)現(xiàn)固定底部組件的示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
vue3中keep-alive和vue-router的結(jié)合使用方式
這篇文章主要介紹了vue3中keep-alive和vue-router的結(jié)合使用方式，?具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
如何在Vue項(xiàng)目中使用axios請(qǐng)求
這篇文章主要介紹了如何在Vue項(xiàng)目中使用axios請(qǐng)求，對(duì)Vue感興趣的同學(xué)，可以參考下2021-05-05
這篇文章主要幫助大家簡(jiǎn)單的理解vue中track-by屬性,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
前端vue項(xiàng)目如何使用Decimal.js做加減乘除求余運(yùn)算
decimal.js是使用的二進(jìn)制來計(jì)算的,可以更好地實(shí)現(xiàn)格化式數(shù)學(xué)運(yùn)算,對(duì)數(shù)字進(jìn)行高精度處理,使用decimal類型處理數(shù)據(jù)可以保證數(shù)據(jù)計(jì)算更為精確,這篇文章主要給大家介紹了關(guān)于前端vue項(xiàng)目如何使用Decimal.js做加減乘除求余運(yùn)算的相關(guān)資料,需要的朋友可以參考下2024-05-05