教程

  1. 在项目 src 目录下创建 setupProxy.js:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    const { createProxyMiddleware } = require('http-proxy-middleware')
    module.exports = function (app) {
    app.use(

    createProxyMiddleware('/api', { // 遇到/api1前缀的请求,就会触发该代理配置
    // 转发给谁
    target: 'http://localhost:5001',
    // 让服务器知道从哪发出的 控制服务器收到的请求头的Host字段的值
    changeOrigin: true,
    // 把api1 替换成空格。去除请求前缀,保证交给后台服务器是正常请求地址
    pathRewrite: { '^/api': '' }
    }),
    // 添加多个
    createProxyMiddleware('/api2', {
    target: 'http://localhost:5002',
    changeOrigin: true,
    pathRewrite: { '^/api2': '' }
    })
    )
    }
  2. 在我们封装的 Axios 动态配置开发环境域名:

    1
    2
    //区分开发环境还是生产环境基础URL
    const baseURL = process.env.NODE_ENV === 'production' ? 'http://www.production.com' : 'http://www.test.com'

    这样我们发送的请求都会通过代理转发到代理的域名上。