Vue3.0?axios跨域請(qǐng)求代理服務(wù)器配置方式
axios跨域請(qǐng)求代理服務(wù)器配置
首先安裝axios
npm install axios
然后在vue.config.js文件下配置如下代碼
（若沒(méi)有vue.config.js文件可以自己創(chuàng)建這個(gè)文件）
module.exports = {
devServer: {
open: true,
port: 8001,
proxy: {
'/apis': {
target: 'http://localhost:8080/thinkphp/personal_blog/public/personal.php/personal/', // target host
ws: true, // proxy websockets
changeOrigin: true, // needed for virtual hosted sites
pathRewrite: {
'^/apis': '' // rewrite path
}
},
}
}
};其中open表示是否運(yùn)行時(shí)就啟動(dòng)app，port表示我們當(dāng)前vue頁(yè)面的端口比如下面我的頁(yè)面端口是8001那么這里就寫(xiě)8001
然后proxy中的代碼就是跨域代理服務(wù)器的配置代碼
其中target就是目標(biāo)api接口，比如你們接口為 http://localhost:8080/api/login 那么target就可以寫(xiě)http://localhost:8080/api/
然后在項(xiàng)目中實(shí)際用我們就可以這么寫(xiě)
axios.post('/apis/login', postData)
.then(response => {
// post 成功，response.data 為返回的數(shù)據(jù)
console.log(response.data)
})
.catch(error => {
// 請(qǐng)求失敗
console.log(error)
})那個(gè)apis就是http://localhost:8080/api/ 也就是我們?cè)趖arget中配置的api接口，"/apis/"就是 pathRewrite中配置的
然后就可以請(qǐng)求成功了，我這里的后臺(tái)是以tp5框架做為后臺(tái)
這里我使用的是vuecli3.0最新版的腳手架
目錄結(jié)構(gòu)如下
其中初始創(chuàng)建時(shí)沒(méi)有vue.config.js的文件，這個(gè)為自己手動(dòng)創(chuàng)建
注意 修改成功后一定要重新啟動(dòng)項(xiàng)目
axios跨域問(wèn)題解決
1.在vue.config.js文件中做如下配置
target: 配置跨域請(qǐng)求的地址changeOrigin: 是否跨域pathRewrite: 路徑重寫(xiě)
2.request.js(攔截器頁(yè)面)如下配置
**這里的baseURL要修改成與vue.config.js文件中設(shè)置代理名稱(chēng)(/api)相同的名字
3.具體請(qǐng)求頁(yè)面如下配置
(不需要做特殊配置)**
url: 具體請(qǐng)求接口
我是根據(jù)自己的項(xiàng)目配置的，大家可以自己對(duì)照一下，僅為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue element封裝form表單的實(shí)現(xiàn)
本文主要介紹了vue element封裝form表單的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
vue使用element寫(xiě)東西讓我感覺(jué)到了特別的方便,下面這篇文章主要給大家介紹了關(guān)于如何利用Vue+Element做個(gè)小頁(yè)面的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
vue+vant-UI框架實(shí)現(xiàn)購(gòu)物車(chē)的復(fù)選框全選和反選功能
這篇文章主要介紹了vue+vant-UI框架實(shí)現(xiàn)購(gòu)物車(chē)的復(fù)選框全選和反選功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
Vue3的Effect是其響應(yīng)式系統(tǒng)的核心,負(fù)責(zé)依賴(lài)追蹤和自動(dòng)響應(yīng),它通過(guò)ReactiveEffect類(lèi)封裝副作用邏輯,實(shí)現(xiàn)依賴(lài)收集和觸發(fā)更新,本文介紹vue?3?effect作用與原理解析,感興趣的朋友一起看看吧2025-02-02
本篇文章主要介紹了vue組件之Alert的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
解決vue A對(duì)象賦值給B對(duì)象,修改B屬性會(huì)影響到A的問(wèn)題
今天小編就為大家分享一篇解決vue A對(duì)象賦值給B對(duì)象,修改B屬性會(huì)影響到A的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了vue最簡(jiǎn)單的前后端交互示例詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
關(guān)于Element-ui中el-table出現(xiàn)的表格錯(cuò)位問(wèn)題解決
使用ElementUI的el-table后,偶然發(fā)現(xiàn)出現(xiàn)行列錯(cuò)位、對(duì)不齊問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Element-ui中el-table出現(xiàn)的表格錯(cuò)位問(wèn)題解決的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要給大家介紹了關(guān)于vue-cli3跨域配置的簡(jiǎn)單方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue-cli3具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue實(shí)現(xiàn)瀑布流組件滑動(dòng)加載更多
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)瀑布流組件滑動(dòng)加載更多，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03