配置vite的proxy過程以及解決post請求403問題
更新時(shí)間：2025年12月04日 10:51:24 作者：莫鳴明
文章介紹了Vite項(xiàng)目中本地開發(fā)環(huán)境通過配置proxy代理實(shí)現(xiàn)跨域請求的方法,并解釋了生產(chǎn)環(huán)境中該配置不生效的情況,通常使用nginx轉(zhuǎn)發(fā)或后端配置CORS來解決,文章還指出,最終的請求地址是target加上rewrite重寫的地址
1.前言
vite項(xiàng)目，本地開發(fā)環(huán)境可以通過配置proxy代理實(shí)現(xiàn)跨域請求。
但是生產(chǎn)環(huán)境，該配置不生效，一般使用 nginx 轉(zhuǎn)發(fā)，或者后端配置cors
2.解釋
server: {
port: 9000,
proxy: { // 本地開發(fā)環(huán)境通過代理實(shí)現(xiàn)跨域，生產(chǎn)環(huán)境使用 nginx 轉(zhuǎn)發(fā)
// 正則表達(dá)式寫法
'^/api': {
target: 'http://xxxx/xx', // 后端服務(wù)實(shí)際地址
changeOrigin: true, //開啟代理
configure: (proxy, options) => {
// 解決請求403問題：invalid CORS request。非常重要的代碼??！
proxy.on('proxyReq', function (proxyReq, req, res) {
proxyReq.removeHeader('referer') // 移除請求頭
proxyReq.removeHeader('origin') // 移除請求頭
})
},
// path是請求方法axios配置的baseUr中去除 協(xié)議+域名+端口 剩下的部分。例如http://127.0.0.1:9000/api，這里的path就是/api
rewrite: (path) => path.replace(/^\/api/, '') // 路徑重寫
}
}
}
注意：最終的請求地址是 target + （rewrite重寫的地址）
3.圖解
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue?Router嵌套路由(children)的用法小結(jié)
嵌套路由就是父路由里面嵌套他的子路由，父路由有自己的路由導(dǎo)航和路由容器（router-link、router-view），通過配置children可實(shí)現(xiàn)多層嵌套，這篇文章主要介紹了Vue--Router--嵌套路由(children)的用法,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue基本指令實(shí)例圖文講解，文章將基本指令講解的很清楚，有對于指令不太懂的同學(xué)可以跟著學(xué)習(xí)研究下2021-02-02
大家在寫vue項(xiàng)目的時(shí)候會(huì)遇到給組件的各種命名，接下來通過本文給大家分享vue組件name的作用小結(jié)，感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05
idea配置vue運(yùn)行命令時(shí),scripts一欄始終為空問題
當(dāng)IntelliJ IDEA配置Vue項(xiàng)目運(yùn)行命令時(shí),若scripts下拉列表為空,通常是因?yàn)镮DEA未能正確識(shí)別或解析package.json文件,檢查FileTypes配置、驗(yàn)證package.json文件內(nèi)容與格式、刷新Node.js依賴與索引、檢查Node.js解釋器配置或手動(dòng)創(chuàng)建運(yùn)行配置等方法可以解決問題2026-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)彈窗拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了Vue中的混入的使用(vue mixins)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
vue3標(biāo)簽中的ref屬性詳解及如何使用$refs獲取元素
這篇文章主要給大家介紹了關(guān)于vue3標(biāo)簽中的ref屬性詳解及如何使用$refs獲取元素的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-11-11
使用vue實(shí)現(xiàn)滑動(dòng)滾動(dòng)條來加載數(shù)據(jù)
在vuejs中,我們經(jīng)常使用axios來請求數(shù)據(jù),但是有時(shí)候,我們請求的數(shù)據(jù)量很大,那么我們?nèi)绾螌?shí)現(xiàn)滑動(dòng)滾動(dòng)條來加載數(shù)據(jù)呢,接下來小編就給大家介紹一下在vuejs中如何實(shí)現(xiàn)滑動(dòng)滾動(dòng)條來動(dòng)態(tài)加載數(shù)據(jù),需要的朋友可以參考下2023-10-10
vxe-list?vue?如何實(shí)現(xiàn)下拉框的虛擬列表
這篇文章主要介紹了vxe-list?vue?如何實(shí)現(xiàn)下拉框的虛擬列表，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue生命周期中的八個(gè)鉤子函數(shù)相機(jī)
這篇文章主要為大家介紹了Vue生命周期中的八個(gè)鉤子函數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12