1.新旧版本问题

React的Proxy分为新旧版本，如何确定呢，npm包之后在require(‘http-proxy-middleware’)后ctrl+鼠标左键进入http-proxy-middleware，旧版本长这样

var HPM = require('./lib')

module.exports = function(context, opts) {
  return new HPM(context, opts)
}

新版本长这样

import { Filter, Options } from './types';
export declare function createProxyMiddleware(context: Filter | Options, options?: Options): import("./types").RequestHandler;
export * from './handlers';
export { Filter, Options, RequestHandler } from './types';

旧版本的配置

const proxy = require('http-proxy-middleware')
module.exports = function(app) {
  app.use(
      proxy('/api', {
          target: 'http://localhost:8080',
          changeOrigin: true,
          pathRewrite: {'^/api': ''}
      })
  )
}

新版本的配置

const {createProxyMiddleware} = require('http-proxy-middleware')

module.exports = function(app) {
    
    app.use(
        createProxyMiddleware('/a1', {
            target: 'http://www.baidu.com',
            changeOrigin: true,
            pathRewrite: {'^/a1': ''}
        })
    )
}

如果按自己的版本配置之后还是不行，可能是npm的包引错了，可以调换一下试试，升级或降低版本应该能解决问题。

2.路径问题：

最坑人的来了，参数中的代理路径不是模糊匹配，是精准匹配，例如你访问

http://localhost:3000/api/a/b/c/d

是触发不到以下的代理的

const proxy = require('http-proxy-middleware')
module.exports = function(app) {
  app.use(
      proxy('/api', {
          target: 'http://localhost:8080',
          changeOrigin: true,
          pathRewrite: {'^/api': ''}
      })
  )
}

只有访问的是以下的才可以

http://localhost:3000/api

解决办法：加一个方法，方法中设置模糊匹配

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
    const filter = function (pathname, req) {
        return pathname.match('^/a1') && req.method === 'GET';
    };
    app.use(
        proxy (filter, {
            target: 'http://www.baidu.com',
            changeOrigin: true,
            pathRewrite: {'^/a1': ''}
        })
    )
}

或者直接访问

http://localhost:3000/api

这种自定义路径来取值也是可以的，反正都是走的代理。这里localhost:3000是你要代理的域名地址。target是真正打到的地址。

随时更新中。。。