Vue-Cli3 设置代理

介绍

VueCli 中的代理是为了解决前端应用和后端 API 服务器没有运行在同一个主机上所导致的跨域问题.

配置

在 Vue 项目的根目录新建 vue.config.js 文件, 此文件是 vue-cli3 的全局配置, 具体详见: https://cli.vuejs.org/zh/config/#vue-config-js

配置 devServer.proxy , 如下

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://domain.cn', // 接口域名
        changeOrigin: true, // 是否允许跨域
        ws: true, // 是否需要支持 websocket 连接
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

配置好以后, 请求接口的域名就是 http://localhost:8080/api/xxx/xxx , pathRewrite 可以指定多个重写规则.

未经允许不得转载：小茉莉 » Vue-Cli3 设置代理