vue使用proxyTable實(shí)現(xiàn)跨域的原理-創(chuàng)新互聯(lián)
本篇文章為大家展示了vue使用proxyTable實(shí)現(xiàn)跨域的原理，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。
創(chuàng)新互聯(lián)建站專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、錯那網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5建站、商城建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為錯那等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。1、實(shí)現(xiàn)
使用vue搭建的項目在本地與后端聯(lián)調(diào)時，因為是使用node運(yùn)行服務(wù)器，IP與后端不一致，所以會產(chǎn)生跨域問題，需要使用如JSONP、跨域代理等手段進(jìn)行跨域請求，而vue已經(jīng)幫我們配置好了，只需要設(shè)置一下proxyTable就行。
1.1、使用proxyTable代理
文件路徑如下，在項目根目錄下的config文件夾中的index.js中
配置代碼如下：
dev{
proxyTable: {
'/api': {
target: 'http://192.168.0.1:200', // 要代理的域名
changeOrigin: true,//允許跨域
pathRewrite: {
'^/api': '' // 這個是定義要訪問的路徑，名字隨便寫
}
}
}
使用時代碼：
// /api/getMenu相當(dāng)于*http://192.168.0.1:200/getMenu
// /api相當(dāng)于http://192.168.0.1:200
this.$http.get("/api/getMenu", {
}
.then(res => {
})
.catch(function(error) {
});
1.2、注意事項
以上面代碼設(shè)置的為例，會把請求中所有帶有/api字段的都替換掉，例如api/getMenu/api，前后兩個都會被替換，導(dǎo)致404等錯誤，在代理數(shù)量比較多的時候容易出現(xiàn)這個問題。
2、proxyTable原理
瀏覽器是禁止跨域的，但是服務(wù)端不禁止，在本地運(yùn)行npm run dev等命令時實(shí)際上是用node運(yùn)行了一個服務(wù)器，因此proxyTable實(shí)際上是將請求發(fā)給自己的服務(wù)器，再由服務(wù)器轉(zhuǎn)發(fā)給后臺服務(wù)器，做了亦曾代理，因為不會出現(xiàn)跨域問題。
上述內(nèi)容就是vue使用proxyTable實(shí)現(xiàn)跨域的原理，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
本文題目：vue使用proxyTable實(shí)現(xiàn)跨域的原理-創(chuàng)新互聯(lián)
本文地址：http://m.jiaotiyi.com/article/ccddds.html