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