利用Vue-cli中的proxyTable解決開發(fā)環(huán)境的跨域問題

對于前端開發(fā)人員來講藏杖,當(dāng)你在開發(fā)環(huán)境中與后臺開發(fā)人員進(jìn)行數(shù)據(jù)聯(lián)調(diào)時懂盐,總會遇到煩人的跨域問題竭恬!

解決跨域的方法有很多種跛蛋,比如你和后臺人員經(jīng)過友好協(xié)商后,你可以通過JSONP的方式或者讓后臺人員將代碼設(shè)置為允許你進(jìn)行跨域痊硕!但是往往前后臺開發(fā)人員的配合默契度是不太高的赊级。如果后臺只給你接口,并明確告訴你不允許修改接口岔绸,怎么辦此衅?怎么辦才能實現(xiàn)跨域?此時你就可以通過proxyTable來解決跨域問題亭螟!
通過proxyTable解決跨域在Vue-cli當(dāng)中是很簡單的。只需修改config文件夾下的index.js中的proxyTable就能實現(xiàn):

//代理配置表骑歹,在這里可以配置特定的請求代理到對應(yīng)的API接口
proxyTable:{
    "/api":{
        target:"http://www.zhangpeiyue.com",//訪問的服務(wù)器地址
        changeOrigin:true,//true為開啟代理
        //secure: true, // 如果是https接口预烙,需要配置這個參數(shù)
        pathRewrite:{
            '^/api': '/'//路徑的替換規(guī)則
           /*
            *這里的配置是正則表達(dá)式,以/api開頭的路徑將會被‘/'替換掉
            *假如后臺文檔的接口是 "http://www.zhangpeiyue.com/user/add"
            *前端調(diào)取API接口應(yīng)寫:axios.get('/api/user/add')
            */
        }
    }
}

以上代碼的“/api"你可以認(rèn)為用于代替target里面的地址道媚,調(diào)取接口的地址直接用api來替換扁掸。
比如后臺接口地址為:"http://www.zhangpeiyue.com/user/login"。
你可以直接寫為:"/api/user/login"即可最域。
當(dāng)然谴分,你也可以根據(jù)不同的API域名所負(fù)責(zé)的模塊不同來進(jìn)行多項配置:

//代理配置表,在這里可以配置特定的請求代理到對應(yīng)的API接口
proxyTable:{
    "/adv":{
        target:"http://adv.zhangpeiyue.com",//訪問的服務(wù)器地址
        changeOrigin:true,//true為開啟代理
        pathRewrite:{
            '^/adv': '/'//路徑的替換規(guī)則
        }
    }镀脂,
    "/user":{
        target:"http://user.zhangpeiyue.com",//訪問的服務(wù)器地址
        changeOrigin:true,//true為開啟代理
        pathRewrite:{
            '^/user': '/'//路徑的替換規(guī)則
        }
    }
}

以上代碼"/adv"與"/user"分別負(fù)責(zé)項目中的廣告模塊與用戶模塊牺蹄。
例如:
后臺文檔的地址是:“http://adv.zhangpeiyue.com/add”,
前端調(diào)取API接口應(yīng)寫:axios.get('/adv/add')

注意:

配置修改完以后一定要重新npm run dev 一次

補充:

changeOrigin的屬性值為一個布爾值薄翅,如果設(shè)置為true沙兰,那么本地會虛擬一個NODE服務(wù)端接收你的請求并代你發(fā)送該請求(中間件)氓奈。因為服務(wù)端語言是沒有跨域問題的,所以這樣最終就解決了跨域問題了鼎天。不過這只適用于開發(fā)環(huán)境舀奶,上線后可以使用反向代理nginx。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末斋射,一起剝皮案震驚了整個濱河市育勺,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌罗岖,老刑警劉巖涧至,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異呀闻,居然都是意外死亡化借,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進(jìn)店門捡多,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蓖康,“玉大人,你說我怎么就攤上這事垒手∷夂福” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵科贬,是天一觀的道長泳梆。 經(jīng)常有香客問我,道長榜掌,這世上最難降的妖魔是什么优妙? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮憎账,結(jié)果婚禮上套硼,老公的妹妹穿的比我還像新娘。我一直安慰自己胞皱,他們只是感情好邪意,可當(dāng)我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著反砌,像睡著了一般雾鬼。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上宴树,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天策菜,我揣著相機與錄音,去河邊找鬼。 笑死做入,一個胖子當(dāng)著我的面吹牛冒晰,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播竟块,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼壶运,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了浪秘?” 一聲冷哼從身側(cè)響起蒋情,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎耸携,沒想到半個月后棵癣,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡夺衍,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年狈谊,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片沟沙。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡河劝,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出矛紫,到底是詐尸還是另有隱情赎瞎,我是刑警寧澤,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布颊咬,位于F島的核電站务甥,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏喳篇。R本人自食惡果不足惜敞临,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望麸澜。 院中可真熱鬧哟绊,春花似錦、人聲如沸痰憎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽铣耘。三九已至,卻和暖如春以故,著一層夾襖步出監(jiān)牢的瞬間蜗细,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留炉媒,地道東北人踪区。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像吊骤,于是被迫代替她去往敵國和親缎岗。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容