Vue-cli proxyTable 解決開發(fā)環(huán)境的跨域問題詳解
和后端聯(lián)調(diào)時(shí)總是會(huì)面對(duì)惱人的跨域問題，最近基于Vue開發(fā)項(xiàng)目時(shí)也遇到了這個(gè)問題，兩邊各自想了一堆辦法，查了一堆資料，加了一堆參數(shù)，最后還得我把自己的localhost映射成上線時(shí)將要使用的域名。
今天翻看代碼時(shí)，突然發(fā)現(xiàn)vue-cli的config文件里有一個(gè)參數(shù)叫proxyTable，看這個(gè)名字就感覺能解決問題，于是我就去搜了一下，果然。在vuejs-templates，也就是vue-cli的使用的模板插件里，有關(guān)于API proxy的說明，使用的就是這個(gè)參數(shù)。
https://vuejs-templates.github.io/webpack/proxy.html
這個(gè)參數(shù)主要是一個(gè)地址映射表，你可以通過設(shè)置將復(fù)雜的url簡化，例如我們要請求的地址是api.xxxxxxxx.com/list/1，可以按照如下設(shè)置：
proxyTable: {
'/list': {
target: 'http://api.xxxxxxxx.com',
pathRewrite: {
'^/list': '/list'
}
}
}
這樣我們在寫url的時(shí)候，只用寫成/list/1就可以代表api.xxxxxxxx.com/list/1.
那么又是如何解決跨域問題的呢？其實(shí)在上面的'list'的參數(shù)里有一個(gè)changeOrigin參數(shù)，接收一個(gè)布爾值，如果設(shè)置為true,那么本地會(huì)虛擬一個(gè)服務(wù)端接收你的請求并代你發(fā)送該請求，這樣就不會(huì)有跨域問題了，當(dāng)然這只適用于開發(fā)環(huán)境。增加的代碼如下所示：
proxyTable: {
'/list': {
target: 'http://api.xxxxxxxx.com',
changeOrigin: true,
pathRewrite: {
'^/list': '/list'
}
}
}
vue-cli的這個(gè)設(shè)置來自于其使用的插件http-proxy-middleware
github：https://github.com/chimurai/http-proxy-middleware
深入了解的話可以看該插件配置說明，似乎還支持websocket，很強(qiáng)大的插件。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用electron-builder將項(xiàng)目打包成桌面程序的詳細(xì)教程
這篇文章主要介紹了使用electron-builder把web端的項(xiàng)目打包生成桌面程序,并可安裝程序,文中通過代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-08-08
利用vue對(duì)比兩組數(shù)據(jù)差異的可視化組件詳解
這篇文章主要給大家介紹了關(guān)于利用vue對(duì)比兩組數(shù)據(jù)差異的可視化組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了Vue中實(shí)現(xiàn)權(quán)限管理詳解,權(quán)限是對(duì)特定資源的訪問許可，所謂權(quán)限控制，也就是確保用戶只能訪問到被分配的資源,而前端權(quán)限歸根結(jié)底是請求的發(fā)起權(quán)，請求的發(fā)起可能有下面兩種形式觸發(fā),需要的朋友可以參考下2023-08-08
Vue實(shí)現(xiàn)雙向綁定的原理以及響應(yīng)式數(shù)據(jù)的方法
這篇文章主要介紹了Vue實(shí)現(xiàn)雙向綁定的原理以及響應(yīng)式數(shù)據(jù)的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
vue跨域問題:Access?to?XMLHttpRequest?at‘httplocalhost解決
在前端發(fā)出Ajax請求的時(shí)候,有時(shí)候會(huì)產(chǎn)生跨域問題,下面這篇文章主要給大家介紹了關(guān)于vue跨域問題:Access?to?XMLHttpRequest?at‘httplocalhost的解決辦法,需要的朋友可以參考下2023-01-01
本文主要介紹了?vue全局引入scss,我們在寫VUE的時(shí)候,會(huì)使用scss，也會(huì)做一些通用樣式,方便使用,在寫好的通用樣式的時(shí)候,每次都要單文件導(dǎo)入,剛開始寫的時(shí)候,感覺還好,后面工程量大了后,就顯得麻煩,那么本文就全局導(dǎo)入scss樣式,下面來看詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
vue項(xiàng)目從node8.x升級(jí)到12.x后的問題解決
這篇文章主要介紹了vue項(xiàng)目從node8.x升級(jí)到12.x后的問題解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue項(xiàng)目引入遠(yuǎn)程jweixin-1.2.0.js文件并使用詳解
這篇文章主要介紹了vue項(xiàng)目引入遠(yuǎn)程jweixin-1.2.0.js文件并使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
這篇文章主要介紹了Vue分頁查詢怎么實(shí)現(xiàn)，使用vue實(shí)現(xiàn)分頁的邏輯并不復(fù)雜，接收后端傳輸過來的數(shù)據(jù)，然后根據(jù)數(shù)據(jù)的總數(shù)和每一頁的數(shù)據(jù)量就可以計(jì)算出一共可以分成幾頁2023-04-04
vue中數(shù)據(jù)不響應(yīng)的問題及解決
這篇文章主要介紹了vue中數(shù)據(jù)不響應(yīng)的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09