本篇文章為大家展示了vue使用proxyTable實現(xiàn)跨域的原理，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

創(chuàng)新互聯(lián)建站專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、錯那網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、HTML5建站、商城建設、集團公司官網(wǎng)建設、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為錯那等各大城市提供網(wǎng)站開發(fā)制作服務。

1、實現(xiàn)

使用vue搭建的項目在本地與后端聯(lián)調時，因為是使用node運行服務器，IP與后端不一致，所以會產(chǎn)生跨域問題，需要使用如JSONP、跨域代理等手段進行跨域請求，而vue已經(jīng)幫我們配置好了，只需要設置一下proxyTable就行。

1.1、使用proxyTable代理

文件路徑如下，在項目根目錄下的config文件夾中的index.js中

配置代碼如下：

dev{
   	proxyTable: {
      '/api': {
        target: 'http://192.168.0.1:200', // 要代理的域名
        changeOrigin: true,//允許跨域
        pathRewrite: {
          '^/api': '' // 這個是定義要訪問的路徑，名字隨便寫
        }
   }
}

使用時代碼：

 // /api/getMenu相當于*http://192.168.0.1:200/getMenu
 // /api相當于http://192.168.0.1:200
 this.$http.get("/api/getMenu", {
 }
 .then(res => {
 })
 .catch(function(error) {
 });

1.2、注意事項

以上面代碼設置的為例，會把請求中所有帶有/api字段的都替換掉，例如api/getMenu/api，前后兩個都會被替換，導致404等錯誤，在代理數(shù)量比較多的時候容易出現(xiàn)這個問題。

2、proxyTable原理

瀏覽器是禁止跨域的，但是服務端不禁止，在本地運行npm run dev等命令時實際上是用node運行了一個服務器，因此proxyTable實際上是將請求發(fā)給自己的服務器，再由服務器轉發(fā)給后臺服務器，做了亦曾代理，因為不會出現(xiàn)跨域問題。

上述內容就是vue使用proxyTable實現(xiàn)跨域的原理，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁標題：vue使用proxyTable實現(xiàn)跨域的原理-創(chuàng)新互聯(lián)
本文鏈接：http://weahome.cn/article/ccddds.html