您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue怎么解決axios請(qǐng)求前端跨域問(wèn)題”,在日常操作中,相信很多人在vue怎么解決axios請(qǐng)求前端跨域問(wèn)題問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”vue怎么解決axios請(qǐng)求前端跨域問(wèn)題”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
跨域:瀏覽器從一個(gè)域名的網(wǎng)頁(yè)去請(qǐng)求另一個(gè)域名的資源時(shí),域名、端口、協(xié)議任一不同,都是跨域。
在前后端分離的模式下,前后端的域名是不一致的,此時(shí)就會(huì)發(fā)生跨域訪問(wèn)問(wèn)題??缬騿?wèn)題來(lái)源于JavaScript的同源策略,即只有 協(xié)議+主機(jī)名+端口號(hào)(如存在)相同,則允許相互訪問(wèn)。也就是說(shuō)JavaScript只能訪問(wèn)和操作自己域下的資源,不能訪問(wèn)和操作其他域下的資源??缬騿?wèn)題是針對(duì)JS和ajax的。而axios是通過(guò)Promise實(shí)現(xiàn)對(duì)ajax技術(shù)的一種封裝,也同樣存在跨域問(wèn)題。
這里我就使用本機(jī)的開(kāi)啟兩個(gè)不同的端口來(lái)測(cè)試。
未處理跨域前的報(bào)錯(cuò)
沒(méi)有做跨域處理請(qǐng)求是這樣的
axios.get('http://localhost:8080/getData') .then(res => { console.log(res) }) .catch(err => { console.error(err); })
前端進(jìn)行反向代理來(lái)解決跨域問(wèn)題。原理圖如下:
1、vue項(xiàng)目的端口是8081
2、自己電腦開(kāi)啟了一個(gè)8080的端口,請(qǐng)求/getData
就會(huì)放回json數(shù)據(jù)。
3、配置代理
1.在vue2.0中
修改config文件夾下的index.js文件,在proxyTable中加上如下代碼:
proxyTable: { '/apis': { target: 'http://localhost:8080/', //要解決跨域的接口的域名 secure:false, //如果是https接口,需要配置這個(gè)參數(shù) changeOrigin: true, // 如果接口跨域,需要進(jìn)行這個(gè)參數(shù)配置 pathRewrite: { '^/apis': '' // 路徑重寫(xiě) } }, },
然后在請(qǐng)求中axios中這樣寫(xiě)
axios.get('apis/getData') .then(res => { console.log(res) }) .catch(err => { console.error(err); })
分析:
target后面的就是需要請(qǐng)求的網(wǎng)址的公共部分,然后用/apis
來(lái)代理這個(gè),最后重寫(xiě)一些路徑,請(qǐng)求的時(shí)候使用的我們的代理的apis來(lái)作為前綴。
這個(gè)前綴我們可以自定義,proxyTable是對(duì)象,所以我們可以配多個(gè)代理。
跨域解決
2.在vue3.0中
vue-cli3 腳手架搭建完成后,項(xiàng)目目錄中沒(méi)有 vue.config.js 文件,需要手動(dòng)創(chuàng)建
新建一個(gè)vue.config.js,配置以下信息,同樣可以解決。
module.exports = { devServer: { proxy: { '^/api': { target: 'http://localhost:8080/',//接口的前綴 ws:true,//代理websocked changeOrigin:true,//虛擬的站點(diǎn)需要更管origin pathRewrite:{ '^/api':''//重寫(xiě)路徑 } } } } }
小結(jié):
changeOrigin: true
:開(kāi)啟代理:在本地會(huì)創(chuàng)建一個(gè)虛假服務(wù)器,然后發(fā)送請(qǐng)求的數(shù)據(jù),并同時(shí)接收請(qǐng)求的數(shù)據(jù),這樣服務(wù)端和服務(wù)端就可以進(jìn)行數(shù)據(jù)的交互。
apis
就是接口實(shí)際請(qǐng)求的前綴,去代理了我們的實(shí)際的接口前綴的公共部分,也就是協(xié)議+主機(jī)名+端口號(hào)
比如 請(qǐng)求接口為localhost:8080/getData
我們只需要傳入:getData
那么公共的域名就是 localhost:8080/
,我們就是在請(qǐng)求接口的公共域名localhost:8080/
改為api/
即可!
把項(xiàng)目運(yùn)行起來(lái)可以看到接口請(qǐng)求的路徑為 :localhost:8081/apis/getData
而進(jìn)過(guò)代理后,實(shí)際的請(qǐng)求路徑是 : localhost:8080/getData
到此,關(guān)于“vue怎么解決axios請(qǐng)求前端跨域問(wèn)題”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。