vue项目配置文件vue.config.js中devServer.proxy 使用说明

devServer.proxy 说明

在前后端分离的项目中，通常前端应用和后端API 服务器没有运行在同一个主机上；在开发环境下将API 请求代理到API 服务器可以通过 vue.config.js 中的 devServer.proxy 选项来配置；

module.exports = {
  devServer: {
  	host:'0.0.0.0,
  	port: 2000,
  	open: true,
    proxy: {
      '/api': 'http://localhost:3000',
    },
  }
}

现在，对 http://localhost:2000/api/users 的请求会将请求代理到 http://localhost:3000/api/users；
如果不需要传递 /api ，则需要重写路径：

module.exports = {
  devServer: {
  	host:'0.0.0.0,
  	port: 2000,
  	open: true,
    proxy: {
      '/api': {
      		target: `http://localhost:3000`,
      		pathRewrite: { '^/api': '' },
      }
    },
    disableHostCheck: true
  }
}

现在对 http://localhost:2000/api/users 的请求将会代理到 http://localhost:3000/users ；

默认情况下，代理时会保留主机头的来源，可以将changeOrigin 设置为true 以此覆盖此行为；

module.exports = {
  devServer: {
  	host:'0.0.0.0,
  	port: 2000,
  	open: true,
    proxy: {
      '/api': {
      		target: `http://localhost:3000`,
      		pathRewrite: { '^/api': '' },
      		changeOrigin: true,
      }
    },
    disableHostCheck: true
  }
}

注意：
在代理请求时，浏览器控制台 NetWork 中显示的请求路径依然是未代理前的路径，即 请求依然 显示为 http://localhost:2000/api/users ；只要保证 请求路径 以/api 开头，这原请求路径将被代理到 目标 路径。