vue使用proxyTable實現(xiàn)跨域的原理

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

1、實現(xiàn)

使用vue搭建的項目在本地與后端聯(lián)調(diào)時，因為是使用node運行服務(wù)器，IP與后端不一致，所以會產(chǎn)生跨域問題，需要使用如JSONP、跨域代理等手段進行跨域請求，而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ù)端不禁止，在本地運行npm run dev等命令時實際上是用node運行了一個服務(wù)器，因此proxyTable實際上是將請求發(fā)給自己的服務(wù)器，再由服務(wù)器轉(zhuǎn)發(fā)給后臺服務(wù)器，做了亦曾代理，因為不會出現(xiàn)跨域問題。

上述內(nèi)容就是vue使用proxyTable實現(xiàn)跨域的原理，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。