Vite代理如何解決跨域問題詳解
前言
我們在編寫前端項(xiàng)目的時(shí)候，經(jīng)常會(huì)遇到跨域的問題，當(dāng)我們訪問后端 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，針對這兩種情況，可以直接用同一個(gè)配置來解決，即代理配置。
不管是 Vite 還是 Webpack，這些打包工具都支持設(shè)置前端代理，它們能夠把對某一段 URL 的訪問直接轉(zhuǎn)換成另一個(gè)真實(shí)的后端 API 地址，這樣前后端就視為使用了相同的域名、協(xié)議和端口，就避免了跨域的問題，還能避免繁瑣的反復(fù)編寫域名。
1.Vite Proxy
我們這里以 Vite 的配置為例，來看一下如何給 API 請求設(shè)置代理。在 Vite 編寫的項(xiàng)目里邊，有一個(gè) vite.config.js配置文件，里邊是關(guān)于 Vite 的配置項(xiàng)，可以在里邊配置代理。假如我們前端項(xiàng)目路徑為 http://localhost:3000，需要代理所有以 /api 開頭的 API 請求，把它轉(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
// 請求
const service = axios.create({
baseURL: '/api',
timeout: 10000
})
也就是說 我請求request.get("/all") ，會(huì)解析成http://127.0.0.1:5173/api/all。
這里我請求http://127.0.0.1:5173/api/all 這是前端的請求。
http://127.0.0.1:8080/all 這里對應(yīng)后端的接口。
前端
后端
2.參考文章
總結(jié)
到此這篇關(guān)于Vite代理如何解決跨域問題的文章就介紹到這了,更多相關(guān)Vite代理解決跨域問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vuex(vue狀態(tài)管理)的特殊應(yīng)用案例分享
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。2020-03-03
這篇文章主要介紹了Vue一個(gè)案例引發(fā)的遞歸組件的使用，本文主要給大家展示如何在項(xiàng)目中使用遞歸組件，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
vue-simple-uploader上傳成功之后的response獲取代碼
這篇文章主要介紹了vue-simple-uploader上傳成功之后的response獲取代碼，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧~2020-09-09
這篇文章主要介紹了vue項(xiàng)目安裝使用vconsole方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-11-11
vue基于element-ui的三級(jí)CheckBox復(fù)選框功能的實(shí)現(xiàn)代碼
最近vue項(xiàng)目需要用到三級(jí)CheckBox復(fù)選框，需要實(shí)現(xiàn)全選反選不確定三種狀態(tài)。這篇文章主要介紹了vue基于element-ui的三級(jí)CheckBox復(fù)選框功能的實(shí)現(xiàn)方法,需要的朋友可以參考下2018-10-10
最近一段時(shí)間，一直在做主題方面的工作。我們的主題，并不是簡單切換一下顏色，或者排版變化這些，而是變化比較大的主題。比如說：主題1和主題2看起來完全不一樣，功能甚至都不一樣。這樣，通過切換css就無法做到了，因此我思考良久，使用了如下2種方法2021-06-06
vue中動(dòng)態(tài)路由加載組件,找不到module問題及解決
這篇文章主要介紹了vue中動(dòng)態(tài)路由加載組件,找不到module問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹在Vue中是如何封裝axios的相關(guān)資料，axios的封裝主要是幫助我們簡化代碼和利于后期的更新維護(hù)，感興趣的小伙伴可以和小編一起來閱讀下面文章的具體內(nèi)容2021-10-10
vue的axios請求改變content-type為form-data問題
這篇文章主要介紹了vue的axios請求改變content-type為form-data問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
element-ui帶輸入建議的input框踩坑(輸入建議空白以及會(huì)閃出上一次的輸入建議問題)
這篇文章主要介紹了element-ui帶輸入建議的input框踩坑(輸入建議空白以及會(huì)閃出上一次的輸入建議問題)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01