vue cli4的webpack_devserver配置多個跨域_vue.config.js相關配置

跨域是因為瀏覽器的同源策略，我們可以通過使用webpack的devServer（devServer就是啟動一個本地服務器）將請求改為服務器向服務器請求，從而繞過瀏覽器的同源策略

在vue.config中配置跨域,這里要注意proxy中標志單詞不能有重復的組成，比如第一個請求匹配'/api'，后面的匹配在不能出現‘/api’組成的標識了，比如'/api2'.因為都含有相同的標識只會匹配第一個。在請求的時候很可能報404錯誤

錯誤寫法：

        '/api':{//匹配每個帶/api的請求，將符合條件的請求的協議，域名和端口號改為target中的內容，
            target:'http://xxx1/',
            changeOrigin:true,
            pathRewrite:{
              "^/api":""
            }
          },
          '/api2':{//會去匹配第一個’/api'，不會被匹配到‘/api2’
            target:'http://xxx2/',
            changeOrigin:true,
            pathRewrite:{
              "^/api2":""
            }
          },

正確的寫法：

module.exports={
devServer:{
        proxy:{
          '/api':{//匹配每個帶/api的請求，將符合條件的請求的協議，域名和端口號改為target中的內容，
            target:'http://xxx1/',
            changeOrigin:true,
            pathRewrite:{
              "^/api":""
            }
          },
          '/jh':{//匹配每個帶/jh的請求
            target:'http://xxx2/',
            changeOrigin:true,
            pathRewrite:{
              "^/jh":""
            }
          },
          '/one':{
            target:'http://xxx3/',
            changeOrigin:true,
            pathRewrite:{
              "^/one":""
            }
          },
        }
}