代理中间件中参数传递问题求助

看起来你遇到了代理中间件传递查询参数时的拼接异常问题，我来帮你分析下原因和解决办法～

你当前的代理配置是这样的：

const Proxy = createProxyMiddleware({   
  target: 'https://api.somesite.com/api/v2/mix/api?productType=GRID',
  changeOrigin: true,  
});
app.use('/api', Proxy);

app.listen(3004, () => { console.log(`Proxy server is running at
http://localhost:${3004}`); });

请求后收到的错误提示是：

{ "code": "40019", "msg": "Parameter GRID/ cannot be empty", "data": null } 

问题原因 #

你把查询参数productType=GRID直接写在了target的URL末尾，当代理处理请求时，如果你的请求路径是/api/（带末尾斜杠），代理会把路径和target拼接成类似https://api.somesite.com/api/v2/mix/api?productType=GRID/的格式，导致参数值意外变成了GRID/，后端因此提示参数不能为空。

解决办法 #

这里有两种靠谱的处理方式：

方式一：单独配置查询参数

把productType参数从target中抽离，用中间件的query配置项单独设置，这样中间件会自动正确拼接参数，不会出现路径干扰的问题：

const Proxy = createProxyMiddleware({   
  target: 'https://api.somesite.com/api/v2/mix/api',
  changeOrigin: true,
  // 单独配置查询参数
  query: {
    productType: 'GRID'
  }
});

方式二：用路径重写消除干扰

如果一定要保留target里的参数，可以通过pathRewrite把请求路径的/api替换为空，避免路径末尾的斜杠影响参数：

const Proxy = createProxyMiddleware({   
  target: 'https://api.somesite.com/api/v2/mix/api?productType=GRID',
  changeOrigin: true,
  // 重写路径，去掉/api前缀
  pathRewrite: {
    '^/api': ''
  }
});

另外也可以检查下你的请求路径，尽量避免请求/api/（带末尾斜杠），改成请求/api不带斜杠，也能临时缓解这个问题，但上面两种配置方式更稳妥。

备注：内容来源于stack exchange，提问作者Sirius