vue修改proxyTable解決跨域請(qǐng)求,報(bào)404的問(wèn)題及解決
vue修改proxyTable解決跨域請(qǐng)求,報(bào)404解決
環(huán)境
vue前端和后端接口部署在同一臺(tái)機(jī)器。
vue服務(wù)部署在 http://localhost:8081,后臺(tái)服務(wù)部署在 http://localhost:8080,可以看到端口是不一樣的,在vue通過(guò)以下方式請(qǐng)求:
export default {
name:'Condition',
data(){
return{
options:[]
}
},
created:function(){
this.getdata();
},
methods:{
getdata(){
this.$axios({
method:'get',
url:'http://localhost:8080/college/getcollege'
}).then(resp => {
this.options = resp.data.data.list;
console.log(resp.data);
}).catch(resp => {
console.log('請(qǐng)求失敗:'+resp.status+','+resp.statusText);
});
}
}
}因?yàn)槎丝诓灰恢?,axios就會(huì)認(rèn)為是跨域了,所以就會(huì)報(bào)錯(cuò):
Access to XMLHttpRequest at 'http://localhost:8080/college/getcollege' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. [http://localhost:8081/#/]
這里只介紹通過(guò)修改config中的index.js文件中的proxyTable的配置去解決的方法。在網(wǎng)上隨便搜一下,基本都是如下的內(nèi)容:
proxyTable: {
"/api": {
target: "http://localhost:8080",
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},修改后,絕大部分人都會(huì)遇到404的錯(cuò)誤,如下:
the server responded with a status of 404 (Not Found) [http://localhost:8081/college/getcollege
奇怪吧,明明設(shè)置了代理,怎么沒(méi)有生效呢?不是方法不對(duì),而是沒(méi)有理解proxyTable中節(jié)點(diǎn)的意義。
其中的“api”節(jié)點(diǎn),這是路由,系統(tǒng)會(huì)去根據(jù)這個(gè)匹配你的地址,匹配上才會(huì)生效,proxyTable中可以指定多個(gè)路由,一開(kāi)始會(huì)認(rèn)為這個(gè)是規(guī)定格式,所以都不會(huì)去修改,除非你的api部署地址是這樣的“http://localhost:8080/api/*”,恭喜你,你的問(wèn)題可能解決了,但是根據(jù)我的地址是“http://localhost:8080/college/getcollege”,就完蛋了,那么該怎么改,如下:
proxyTable: {
//碰到college路由就會(huì)起作用了
"/college": {
target: "http://localhost:8080",
changeOrigin: true,
//重定向,一般可以不用寫,或者值寫出空''
pathRewrite: {
'^/college': '/college'
}
}
},OK,問(wèn)題解決。
vue的proxyTable跨域處理
當(dāng)我們請(qǐng)求的地址出現(xiàn)不符合同源策略的時(shí)候,就會(huì)出現(xiàn)跨域的問(wèn)題,這里僅對(duì)在vue 項(xiàng)目中使用axions請(qǐng)求跨域做記錄
跨域報(bào)錯(cuò)截圖

案例:請(qǐng)求"https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=10"中的數(shù)據(jù)
分析
問(wèn)號(hào)(?)之前的為我們要請(qǐng)求的后端地址,包含協(xié)議、域名、地址等等問(wèn)號(hào)(?)之后的內(nèi)容為我們需要提交的參數(shù),參數(shù)之間用&連接
解決方案
1、配置跨域
在項(xiàng)目中與src同級(jí)下有一個(gè)config文件夾,打開(kāi)這個(gè)文件夾中的index.js文件

在index.js文件的 module.exports 中的 dev 中的 proxyTable 進(jìn)行跨域配置
module.exports = {
dev: {
...
proxyTable: {
'/api': { //這里的/api,就是我們?cè)趖arget里寫的要請(qǐng)求的后端接口
target: 'https://cn.bing.com/',
//要請(qǐng)求的后端接口地址,一般寫多個(gè)數(shù)據(jù)接口的共同內(nèi)容,后面的地址根據(jù)請(qǐng)求數(shù)據(jù)的不同,在請(qǐng)求的時(shí)候再拼接上就好
changeOrigin: true, //是否允許跨越
pathRewrite: {
'^/api': '', //重寫,一般情況下不需要
}
}
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be
},
...
}2、使用axios請(qǐng)求數(shù)據(jù)
methods:{
getData(){
axios
.get("/api/HPImageArchive.aspx", {
params: {
format: "js",
idx: 0,
n: 1
}
})
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
}
}
//get:請(qǐng)求方式
// "/api/HPImageArchive.aspx":請(qǐng)求地址,這里的api一定不能忘記,它代表著我們?cè)谡?qǐng)求地址前面部分
// params: 我們需要帶上的參數(shù)就寫這個(gè)對(duì)象中
//.then: 請(qǐng)求成功之后,要執(zhí)行的代碼塊
//.catch: 請(qǐng)求失敗之后,需要執(zhí)行的代碼塊注意事項(xiàng) 在配置好跨域之后,請(qǐng)求的時(shí)候,一定不要忘記在前面加上/api如果有修改congfig中的配置,一定記得重啟服務(wù),否則你的修改瀏覽器可能不會(huì)給于響應(yīng),讓你白忙活半天如果自己覺(jué)得都沒(méi)有問(wèn)題還一直不成功,記得打開(kāi)network進(jìn)行查看,不要一味的盯著自己的代碼和報(bào)錯(cuò)在network中,可以查看自己的請(qǐng)求地址是否有誤,需要攜帶的參數(shù)是否有帶上,以及參數(shù)是否正確

總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue+el-menu實(shí)現(xiàn)菜單欄無(wú)限多層級(jí)分類
這篇文章主要為大家詳細(xì)介紹了vue+el-menu實(shí)現(xiàn)菜單欄無(wú)限多層級(jí)分類,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03
基于vue實(shí)現(xiàn)網(wǎng)站前臺(tái)的權(quán)限管理(前后端分離實(shí)踐)
這篇文章主要介紹了基于vue實(shí)現(xiàn)網(wǎng)站前臺(tái)的權(quán)限管理(前后端分離實(shí)踐),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
基于Vue實(shí)現(xiàn)圖片在指定區(qū)域內(nèi)移動(dòng)的思路詳解
這篇文章主要介紹了基于Vue實(shí)現(xiàn)圖片在指定區(qū)域內(nèi)移動(dòng),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
解決webpack+Vue引入iView找不到字體文件的問(wèn)題
今天小編就為大家分享一篇解決webpack+Vue引入iView找不到字體文件的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue項(xiàng)目出現(xiàn)ERESOLVE could not resolve問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目出現(xiàn)ERESOLVE could not resolve問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue3一個(gè)元素如何綁定兩個(gè)或多個(gè)事件
這篇文章主要介紹了vue3一個(gè)元素如何綁定兩個(gè)或多個(gè)事件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue-baidu-map 進(jìn)入頁(yè)面自動(dòng)定位的解決方案(推薦)
這篇文章主要介紹了vue-baidu-map 進(jìn)入頁(yè)面自動(dòng)定位的解決方案,需要的朋友可以參考下2018-04-04

