涉及最常用的几个项（匹配路径，target，changeOrigin，pathRewrite），以react的http-proxy-middleware插件为例

一、target：目标服务器 host

二、changeOrigin：是都跨域，默认false，是否需要改变原始主机头为目标URL

三、匹配路径

先来一段基本的代码（假设我们的接口地址是‘http://127.0.0.1:8080/sms/api/v1/...’,标红为公共部分，即是我们需要处理的那部分）

这是一个最基本的setupProxy.js文件

这部分主要是‘/sms’这部分：

createProxyMiddleware({...})   匹配任何路径，所有请求将被转发

createProxyMiddleware('/', {...}) ：匹配任何路径，所有请求将被转发；

createProxyMiddleware('/sms', {...})：匹配/sms开头的请求

createProxyMiddleware(['/api', '/sms', '/v1'], {...})    匹配多个路径

如上例子我们匹配的是‘/sms’开头的路径（当然可以更精确的写成‘/sms/api/v1’）

接下来我们看看封装的axios文件应该怎么写base，下图是封装的get请求（其他请求类似），我们主要是注意base变量，请求接口地址公共部分除去host就剩下/sms/api/v1这部分，即我们将这部分公共路径提取出来，可以简化在写具体请求时的路径,所以base变量的值就是'/sms/api/v1'

四、pathRewrite：重写请求

下图 我们源访问的是'/coo'，那么请求会被解析为/sms/api/v1，我的理解是只要请求路径有/coo都会替换成/sms/api/v1，所以这样的话，我们get请求的base变量就应该为/coo

最近在看react，顺带再学习一下proxy，平时做项目基本上不怎么自己配置这些，欠缺有点多。以上仅代表个人观点，有不当之处欢迎大佬们指正