vue中訪問後臺接口，跨域問題的proxyTable 配置無效,訪問404問題解決

         vue項目需要訪問訪問後臺接口，因爲前端項目是一個單獨的服務，後臺接口肯定也是單獨的服務，兩者之間的訪問地址和端口坑定不一樣，一訪問後臺接口肯定會出現跨域問題，什麼是跨域，大概意思就是要訪問的地址與當前服務啓動的地址不同，或者說端口不一樣，就相當於你從當前鏈接訪問到一個新的鏈接當端口和域名發生改變時就會導致跨域問題的出現，

      這邊在網上搜索了一下怎麼解決vue項目中的跨域問題，大部分都說在config下index.js文件中的proxyTable配置一下就好了,

我在本地測試了一下，按照第一種方法，訪問報404，，訪問地址沒有指向我配置的target，，，後面又找了一些資料，發現了第二種方法，在我本地測試了一下，可以成功請求後臺接口，並且也接收到了後臺的響應參數

第一種方法(網上大部分的寫法)
proxyTable: {
        '/api':{
        target:'http://xxxx.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
第二種方法（親測有效的方法）
proxyTable: {
        '/api/*':{
        target:'http://xxxx.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    }

以下是我本地測試訪問後臺接口的截圖

兩個頁面請求的前綴不同，指定訪問的後臺地址也就不一樣

 

 

在頁面上打斷點，可以看到請求後臺接口成功，並且響應了參數