Vue-Cli配置代理轉(zhuǎn)發(fā)解決跨域問題的方法
更新時間：2022年06月24日 09:18:39 作者：小熊快跑
本文主要介紹了Vue-Cli配置代理轉(zhuǎn)發(fā)解決跨域問題的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
vue-cli中集成的跨域解決方案
思路：
在前端服務(wù)和后端接口服務(wù)之間 架設(shè)一個中間代理服務(wù)，它的地址保持和前端服務(wù)一致，那么：
- 代理服務(wù)和前端服務(wù)之間由于協(xié)議域名端口三者統(tǒng)一不存在跨域問題，可以直接發(fā)送請求
- 代理服務(wù)和后端服務(wù)之間由于并不經(jīng)過瀏覽器沒有同源策略的限制，可以直接發(fā)送請求
這樣，我們就可以通過中間這臺服務(wù)器做接口轉(zhuǎn)發(fā)，在開發(fā)環(huán)境下解決跨域問題，看起來好像挺復(fù)雜，其實vue-cli已經(jīng)為我們內(nèi)置了該技術(shù)，我們只需要按照要求配置一下即可。
vue-cli解決跨域配置說明
在vue.config.js配置文件中，有一項是devServer，它就是我們下邊要操作的主角。
module.exports = {
devServer: {
// ... 省略
// 代理配置
proxy: {
// 如果請求地址以/api打頭,就出觸發(fā)代理機制
// http://localhost:9588/api/login -> http://localhost:3000/api/login
'/api': {
target: 'http://localhost:3000' // 我們要代理的真實接口地址
}
}
}
}
}
基地址
.env.development
# VUE_APP_BASE_API = 'http://localhost:3000/api' (這句不要了) VUE_APP_BASE_API = '/api'
api/user.js
export function login(formData) {
return request({
// url: 'api/sys/login',
+ url: '/sys/login', // 前面的api就省略了
method: 'POST',
data: formData
})
}
重啟項目，驗證結(jié)果
- 修改了配置文件，一定要重啟前端項目
- 再次測試登陸接口，我們發(fā)現(xiàn)：跨域問題已經(jīng)解決了
小結(jié)
- vue-cli集成了跨域代理功能------ 只能用在開發(fā)階段。
- vue.config.js文件中，在devServe下按指定格式配置了proxy，再重啟項目即可。
特別強調(diào)：
ajax的基地址baseUrl必須是相對地址，而不能是絕對地址
到此這篇關(guān)于Vue-Cli配置代理轉(zhuǎn)發(fā)解決跨域問題的方法的文章就介紹到這了,更多相關(guān)Vue-Cli 代理轉(zhuǎn)發(fā)跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue?element-ui中表格過長內(nèi)容隱藏顯示的實現(xiàn)方式
在Vue項目中,使用ElementUI渲染表格數(shù)據(jù)時,如果某一個列數(shù)值長度超過列寬,會默認(rèn)換行,造成顯示不友好,下面這篇文章主要給大家介紹了關(guān)于Vue?element-ui中表格過長內(nèi)容隱藏顯示的實現(xiàn)方式,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue中使用echarts制作圓環(huán)圖的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細(xì)介紹了VUE+SpringBoot實現(xiàn)分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
vue如何實現(xiàn)二進(jìn)制流文件導(dǎo)出excel
這篇文章主要介紹了vue如何實現(xiàn)二進(jìn)制流文件導(dǎo)出excel，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
詳解Vue如何進(jìn)行表單聯(lián)動與級聯(lián)選擇
表單聯(lián)動和級聯(lián)選擇是Vue.js中常見的功能，在下面的文章中，我們將討論如何在Vue.js中實現(xiàn)表單聯(lián)動和級聯(lián)選擇，感興趣的小伙伴可以了解一下2023-06-06
vue獲取token(設(shè)置token,清除token)實現(xiàn)登錄方式
這篇文章主要介紹了vue獲取token(設(shè)置token,清除token)實現(xiàn)登錄方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
前端使用print.js實現(xiàn)打印功能(基于vue)
最近新接了一個需求,想要在前端實現(xiàn)打印功能,下面這篇文章主要給大家介紹了關(guān)于前端使用print.js實現(xiàn)打印功能(基于vue)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
vuejs2.0子組件改變父組件的數(shù)據(jù)實例
本篇文章主要介紹了vuejs2.0子組件改變父組件的數(shù)據(jù)實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
vue+element模態(tài)框中新增模態(tài)框和刪除功能
這篇文章主要介紹了vue+element模態(tài)框中新增模態(tài)框和刪除功能,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要為大家介紹了項目中一鍵添加husky實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09