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è)路由,一開始會(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文件夾,打開這個(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)題還一直不成功,記得打開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-09vue項(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-10vue3一個(gè)元素如何綁定兩個(gè)或多個(gè)事件
這篇文章主要介紹了vue3一個(gè)元素如何綁定兩個(gè)或多個(gè)事件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11vue-baidu-map 進(jìn)入頁(yè)面自動(dòng)定位的解決方案(推薦)
這篇文章主要介紹了vue-baidu-map 進(jìn)入頁(yè)面自動(dòng)定位的解決方案,需要的朋友可以參考下2018-04-04