Vue-Cli配置代理轉(zhuǎn)發(fā)解決跨域問題的方法
vue-cli中集成的跨域解決方案
思路：
在前端服務(wù)和后端接口服務(wù)之間 架設(shè)一個(gè)中間代理服務(wù)，它的地址保持和前端服務(wù)一致，那么：
- 代理服務(wù)和前端服務(wù)之間由于協(xié)議域名端口三者統(tǒng)一不存在跨域問題，可以直接發(fā)送請求
- 代理服務(wù)和后端服務(wù)之間由于并不經(jīng)過瀏覽器沒有同源策略的限制，可以直接發(fā)送請求
這樣，我們就可以通過中間這臺服務(wù)器做接口轉(zhuǎn)發(fā)，在開發(fā)環(huán)境下解決跨域問題，看起來好像挺復(fù)雜，其實(shí)vue-cli已經(jīng)為我們內(nèi)置了該技術(shù)，我們只需要按照要求配置一下即可。
vue-cli解決跨域配置說明
在vue.config.js配置文件中，有一項(xiàng)是devServer，它就是我們下邊要操作的主角。
module.exports = {
devServer: {
// ... 省略
// 代理配置
proxy: {
// 如果請求地址以/api打頭,就出觸發(fā)代理機(jī)制
// http://localhost:9588/api/login -> http://localhost:3000/api/login
'/api': {
target: 'http://localhost:3000' // 我們要代理的真實(shí)接口地址
}
}
}
}
}
基地址
.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
})
}
重啟項(xiàng)目，驗(yàn)證結(jié)果
- 修改了配置文件，一定要重啟前端項(xiàng)目
- 再次測試登陸接口，我們發(fā)現(xiàn)：跨域問題已經(jīng)解決了
小結(jié)
- vue-cli集成了跨域代理功能------ 只能用在開發(fā)階段。
- vue.config.js文件中，在devServe下按指定格式配置了proxy，再重啟項(xiàng)目即可。
特別強(qiáng)調(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實(shí)現(xiàn)多個(gè)Formt表單同時(shí)驗(yàn)證
這篇文章主要介紹了vue element實(shí)現(xiàn)多個(gè)Formt表單同時(shí)驗(yàn)證方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
解決Vue的文本編輯器 vue-quill-editor 小圖標(biāo)樣式排布錯(cuò)亂問題
這篇文章主要介紹了解決Vue的文本編輯器 vue-quill-editor 小圖標(biāo)樣式排布錯(cuò)亂問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
本文深入探討了Vue3中新特性shallowReactive的使用和原理,shallowReactive是創(chuàng)建淺響應(yīng)式對象的API,只對對象的第一層屬性進(jìn)行響應(yīng)式轉(zhuǎn)換,不對嵌套對象處理,有助于性能優(yōu)化和狀態(tài)管理,同時(shí)也指出了shallowReactive在使用中的注意事項(xiàng)2024-10-10
教你用vue實(shí)現(xiàn)一個(gè)有趣的圍繞圓弧動(dòng)畫效果
最近做的兩個(gè)項(xiàng)目都是關(guān)于vue的,做完整理一下,這篇文章主要給大家介紹了關(guān)于如何用vue實(shí)現(xiàn)一個(gè)有趣的圍繞圓弧動(dòng)畫效果的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
el-table?樹形數(shù)據(jù)?tree-props?多層級使用避坑
本文主要介紹了el-table?樹形數(shù)據(jù)?tree-props?多層級使用避坑,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
手動(dòng)實(shí)現(xiàn)vue2.0的雙向數(shù)據(jù)綁定原理詳解
這篇文章主要給大家介紹了關(guān)于手動(dòng)實(shí)現(xiàn)vue2.0的雙向數(shù)據(jù)綁定原理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
Vue+mui實(shí)現(xiàn)圖片的本地緩存示例代碼
這篇文章主要介紹了Vue+mui實(shí)現(xiàn)圖片的本地緩存的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05
在vue項(xiàng)目中，搜索功能是我們經(jīng)常需要使用的一個(gè)場景，最常用的是在列表數(shù)據(jù)中搜索一個(gè)想要的，今天的例子就是我們實(shí)現(xiàn)vue從列表數(shù)據(jù)中搜索，希望對大家有所幫助2023-03-03
vue+elementUI的select下拉框回顯為數(shù)字問題
這篇文章主要介紹了vue+elementUI的select下拉框回顯為數(shù)字問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue3發(fā)布已有一段時(shí)間了,文檔也大概看了一下,不過對于學(xué)一門技術(shù),最好的方法還是實(shí)戰(zhàn),這篇文章主要給大家介紹了關(guān)于vue3不同語法格式對比的相關(guān)資料,需要的朋友可以參考下2021-08-08