vue-cli 3.0之跨域请求devServer proxy代理配置

vue-cli 3.0之跨域请求devServer proxy代理配置

当我们的前端服务和后端服务不同源即协议不同，端口不同，域名不同时，就会出现跨域的问题。
通过配置devServer.proxy就可以解决跨域的问题。
基本配置：

// 将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000
module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

详细配置：
dev-server.proxy使用功能强大的 http-proxy-middleware 软件包。
假如我们需要请求：http://common.dm.com/api/loginPost
但实际请求是：http://localhost:3000/api/loginPost
我们需要请求到 http://common.dm.com 下的接口就需要配置：

module.exports = {
    devServer: {
        proxy: {
            // 只有碰到/api的才会执行代理
            '/api': {
                target: 'http://common.dm.com', // 要访问的跨域的域名
                ws: true, // 是否启用websockets
                changeOrigin: true // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样客户端端和服务端进行数据的交互就不会有跨域问题
            }
        }
    }
}

pathRewrite属性的用处：
如果我们要请求：http://common.dm.com/api/loginPost
但实际请求是：http://localhost:3000/mock/loginPost

module.exports = {
    devServer: {
        proxy: {
            '/mock': {
                target: 'http://common.dm.com',
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/mock': '/api'
                }
            }
        }
    }
}