利用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)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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