vue项目中的代理相关问题

在vue项目中，会遇到解决ajax跨域的问题，如果我们使用vue-cli脚手架做的话，就可以依靠webpack 中的代理中间件，devserver,  http-proxy-middleware的中间件来完成代理。下面有关代理的详细配置，

1.后台只有一个服务器的时候：

   

  devServer: {

      proxy: "http://localhost:4000"

    }

2.后台有两个服务器甚至多个的时候：

 

 devServer: {

    proxy: {

      "/api": {

        target: "http://localhost:4000",

        ws: true,

        changeOrigin: true, //支持跨域

        pathRewrite: {

          //重写路径,让代理服务在转发请求是，对路径进行修改

          "^/api": ""

        }

      },

    加上路径重写的话，就会方便许多，也不会影响最终的效果

      "/foo": {

        target: "http://localhost:4001",

        ws: true,

        changeOrigin: true,

        pathRewrite: {

          "^/foo": ""

        }

      }

    }

  }