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":""
            }
          },
        }
}