教程

  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'

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