如何在 Vue 中配置 DevServer.proxy 代理

A kitten
蒋川
B 端数据开发,卡拉云联合创始人
最近更新 2022年03月28日

如何在 Vue 中配置 DevServer.proxy 代理

在开发环境中,用 Vue 搭建的前端与后端会跑在一台机器上,但现实的生产环境里,前端和后端通常跑在两台机器上,Vue 前端通过 API 与后端通讯。这时我们就需要配置 Vue DevServer.proxy 代理,以便前后端顺利通讯。

本教程详细讲解如何配置 Vue DevServer.proxy 代理以及如何解决跨域问题等各类配置细节。

Vue DevServer 配置方法

一般来说 Vue 默认的结构目录是这样的:

. 
├── build 
├── config 
├── index.html 
├── src
├── node_modules
└── package.json 

Vue DevServer 的配置文件放在 / config 目录中。在 config 目录中新建一个 js 文件 vue.config.js,用于存放配置信息。

DevServer 基本用法

const proxy = require('http-proxy-middleware'); // 在 config 中引入依赖

module.exports = {
  devServer: {
    proxy: 'http://192.168.100.1:3000'
  }
}

所有流量直接发送到 http://192.168.100.1:3000

DevServer 添加指向单端口

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://192.168.100.1:3000',
      }
    }
  }
}

前端请求/api/xxx 会被指向 http://192.168.100.1:3000/api/xxx

DevServer 添加指向多端口

module.exports = {
  devServer: {
      proxy: {
        '/api': {
          target: 'http://192.168.100.1:3000',
          changeOrigin: true
        },
        '/get': {
          target: 'http://192.168.130.5:8080',
          changeOrigin: true
        },
        '/post': {
          target: 'http://192.168.179.100:8081',
          changeOrigin: true
        }
      }
    }
  }

DevServer 忽略 / api 后缀

devServer: {
  proxy: {
    '/api': {
      target: 'http://192.168.100.1:3000',
      pathRewrite: { '^/api': '' },
    }
  }
}

如果不希望向后端传递 /api 后缀,可以这么写。

前端请求/api/xxx 会被指向 http://192.168.100.1:3000/xxx 会忽略 / api

DevServer 解决跨域问题

devServer: {
  proxy: {
    '/api': {
      target: 'http://192.168.100.1:3000',
      changeOrigin: true,
    }
  }
}

DevServer Webpack 官网对跨域问题原理的解释

The origin of the host header is kept when proxying by default, you can set changeOrigin  to true to override this behaviour. It is useful in some cases like using name-based virtual hosted sites.

也就是说,当代理进行时,host 头默认会保留,当我们把 changeOrigin 设置为 true 时,即可覆盖掉它。

所有假设前端跑在服务器 http://122.160.100.1:80 上,后端跑在 http://192.168.100.1:3000 上。

默认(false)时,request.getHeader("Host") 获得的是http://122.160.100.1:80

如果 changeOrigin: true,则 request.getHeader("Host") 获得的是 http://192.168.100.1:3000

如果你碰到跨域错误,那么设置 changeOrigin 即可解决问题。

DevServer **忽略 HTTPS 安全提示**

devServer: {
  proxy: {
    '/api': {
      target: 'http://192.168.100.1:3000',
      secure: false,
    }
  }
}

默认的安全设置情况下,是不接受后端服务器使用无效安全证书,且使用 https 的后端。如果要忽略这个错误,可这么写 secure: false,

DevServer 相关参数

target:"xxx",            // 使用url模块解析的url字符串
forward:"xxx",           // 使用url模块解析的url字符串
changeOrigin:true/false, // 默认值:false 将主机标头的原点更改为目标URL
ws:true/false,           // 是否代理websockets
xfwd:true/false,         // 添加x-forward标头
secure:true/false,       // 是否验证SSL Certs
toProxy:true/false,      // 传递绝对URL作为路径(对代理代理很有用)
prependPath:true/false,  // 默认值:true 指定是否将目标的路径添加到代理路径
ignorePath:true/false,   // 默认值:false 指定是否忽略传入请求的代理路径
localAddress:"xxx",      // 要为传出连接绑定的本地接口字符串
agent:{},                // 传递给http(s).request的对象
ssl:{},                  // 传递给https.createServer()的对象

学会了如何配置 Vue DevServer 后,可以继续阅读前后端搭建实战文章《手把手教你Vue3+Node.js+Expres+MySQL环境搭建》其中有前后端 Vue DevServer 配置实践。

Vue DevServer 总结

本文详细讲解了如何配置 Vue DevServer 代理,整个配置过程并不难,主要是要求大家灵活运用其中的参数配置。如果你觉得搞前端非常繁琐,推荐使用卡拉云,卡拉云是一套低代码开发工具,内置各类组件,无需懂任何前端,仅需拖拽即可快速生成。

下图为使用卡拉云搭建的内部广告投放监测系统,仅需拖拽,1小时搞定。

09-kalacloud

卡拉云是新一代低代码开发工具,免安装部署,可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流,定制开发。无需繁琐的前端开发,只需要简单拖拽,即可快速搭建企业内部工具。原来三天的开发工作量,使用卡拉云后可缩减至 1 小时,欢迎免费试用卡拉云

扩展阅读: