Vue代理請求數(shù)據(jù)出現(xiàn)404問題及解決
更新時間：2023年07月04日 09:41:45 作者：小羔子1997
這篇文章主要介紹了Vue代理請求數(shù)據(jù)出現(xiàn)404的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue代理請求數(shù)據(jù)出現(xiàn)404
當(dāng)使用代理解決跨域問題出現(xiàn)404錯誤時，一般有兩種原因。
需要進行pathRewrite重寫
比如：你想訪問的真實地址為http://39.98.123.211/user/list，你請求的url為/api/user/list下面是你的代理程序
module.exports = {
lintOnSave:false,
//配置代理跨域
devServer:{
proxy:{
"/api":{
target:"http://39.98.123.211",
}
}
}
}如果沒有對/api重寫，那么代理完你真實的地址則為：http://39.98.123.211/api/user/list，明顯多了/api，因此會出現(xiàn)404錯誤。
我們進行代理時，路徑中有/api，則會使用http://39.98.123.211，再加上url，則就為我們的請求地址 http://39.98.123.211/api/user/list。
所以要對/api重寫，如果你的真實路徑中正好為http://39.98.123.211/api/user/list，包含了/api那就不用重寫。
因此將代碼改為：
module.exports = {
lintOnSave:false,
//配置代理跨域
devServer:{
proxy:{
"/api":{
target:"http://39.98.123.211",
pathRewrite:{
'^/api':'',
}
}
}
}
}如果無法解決404錯誤，則使用第二種方法。
將代理代碼放入config文件夾下的index.js文件中
如果你是vue3項目則在vue.config.js中寫代理即可，如果你是vue2項目，代理請求出現(xiàn)404，且第一種方法無效，則將代理代碼寫入config文件夾下的index.js中的proxyTable：{}中
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
//配置代理跨域
"/api":{
target:"http://39.98.123.211",
},
},由于我的真實地址中有/api所以就沒進行/api重寫。記住代理寫完，要重寫運行項目。
vue跨越解決以及代理之后會出現(xiàn)404
1.根目錄下創(chuàng)建vue.config.js
// vue.config.js
module.exports = {
? ? devServer: {
? ? ? ? proxy: {
? ? ? ? ? ? // 當(dāng)你vue請求路徑中包含/api，那么vue會自動幫你代理請求到你的后端地址
? ? ? ? ? ? // 比如我vue請求的是 '/api/user/getUser'，那么會幫我代理請求到后端地址
? ? ? ? ? ? '/api': {
? ? ? ? ? ? ? ? // 后端地址
? ? ? ? ? ? ? ? target: "http://127.0.0.1:8088",
? ? ? ? ? ? ? ? /**
? ? ? ? ? ? ? ? ? ? 官方文檔的意思：將主機頭的來源更改為目標(biāo) URL
? ? ? ? ? ? ? ? ? ? 簡單理解就是需不需要代理
? ? ? ? ? ? ? ? **/
? ? ? ? ? ? ? ? changeOrigin: true,
? ? ? ? ? ? ? ? /**
? ? ? ? ? ? ? ? ? ? 重寫目標(biāo)地址，比如我vue請求的是/api/user/getUser
? ? ? ? ? ? ? ? ? ? 經(jīng)歷過重寫之后，我們請求的地址是http://localhost:8081/user/getUser
? ? ? ? ? ? ? ? ? ? 這里用的是正則表達(dá)式，^符號是用來限制開頭
? ? ? ? ? ? ? ? ? ? 意思就是匹配vue請求的開頭是否為/api，是的話就進行重寫替換
? ? ? ? ? ? ? ? **/
? ? ? ? ? ? ? ? pathRewrite: {
? ? ? ? ? ? ? ? ? ? ["^/api"]: ""
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
}2.接口寫法,
? ? this.axios({method:"post",url:"/user/login",data:{
? ? ? tel:"admin",
? ? ? passWord:"admin"
? ? }}).then(res=>{
? ? ? console.log(res)
? ? }) ??在main.js中加入
axios.defaults.baseURL = '/api'
3.重新啟動項目
4.要是以上都沒有問題還是404 那就是緩存了，換瀏覽器，多重啟幾次?。。∥业木褪悄婷罹秃昧?。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-cli配置flexible過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了前端必知必會之Vue?v-if指令的相關(guān)資料,Vue中的條件渲染指令v-if、v-else-if和v-else用于根據(jù)條件動態(tài)創(chuàng)建HTML元素,通過使用比較運算符和邏輯運算符,可以編寫復(fù)雜的條件邏輯,需要的朋友可以參考下2025-02-02
本文主要介紹了element?表格多級表頭子列固定的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要介紹了vue實現(xiàn)前進刷新，后退不刷新效果,即加載過的界面能緩存起來（返回不用重新加載），關(guān)閉的界面能被銷毀掉（再進入時重新加載）。本文給大家分享實現(xiàn)思路，需要的朋友可以參考下2018-01-01
這篇文章主要為大家詳細(xì)介紹了Vue.js搭建移動端購物車界面，重點介紹基本結(jié)構(gòu)和數(shù)據(jù)渲染，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要為大家詳細(xì)介紹了vuejs實現(xiàn)下拉框菜單選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
本文主要介紹了以element-ui基礎(chǔ)封裝大文件上傳的組件,包括斷點續(xù)傳,秒傳,上傳進度條,封裝思想邏輯來源于el-upload 組件源碼,文中有具體案例分享,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue項目打包步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了vue項目如何解決數(shù)字計算精度問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本篇文章主要介紹了探索Vue高階組件的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01