vue-cli3 跨域代理proxy總是失敗的原因

在vue項目開發中，為了調試方便，我們需要配置跨域代理proxy。根據vue-cli3官方文檔，在vue.config.js配置如下

// vue.config.js
module.export={
      devServer: {
            proxy: {
                  '/api':{
                        target: 'http:// your.proxy.site', // 
                        ws: true, // websockets
                        changeOrigin: true,  // needed for virtual hosted sites
                        pathRewrite: {
                              '^/api': ''
                        }
                  }
            }
      }
    
}

結果發現代理無效，瀏覽器還是會報跨域錯誤，抓耳撓腮好久，最后終於發現代理寫的沒有問題，問題是項目異步請求接口中沒有拼接 /api 所導致，還有就是接口中本來就是以/api開頭的，這時候會讓人很混亂，搞不清哪個是代理地址字符串，哪個是真正接口中的字符串。所以分析對了之后，我用下面的方法：

// vue.config.js
module.export={
      devServer: {
            proxy: {
                  '/proxy':{
                        target: 'http:// your.proxy.site', // 
                        ws: true, // websockets
                        changeOrigin: true,  // needed for virtual hosted sites
                        pathRewrite: {
                              '^/proxy': ''
                        }
                  }
            }
      }
    
}

這樣，就不會出現和原有接口中的字符串混亂，然后在接口地址中拼接上 /proxy,去請求接口，發現問題已經搞定了。