使用带有变量输入的 createProxyMiddleware答案

【问题标题】：Using createProxyMiddleware with variable inputs使用带有变量输入的 createProxyMiddleware
【发布时间】：2022-01-19 20:30:26
【问题描述】：

我正在使用createProxyMiddleware 连接到外部 api。我有 2 条几乎相同的路径，但其中一条路径我必须输入 2 个参数。我在如何让代理中间件与具有输入参数的路径一起工作时遇到问题。

这是中间件：

const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
  app.use(
    "/assets",
    createProxyMiddleware({
      target: "https://api.cryptowat.ch",
      changeOrigin: true,
    })
  );
  app.use(
    "/markets",
    createProxyMiddleware({
      target: "https://api.cryptowat.ch",
      changeOrigin: true,
    })
  );
};

app.use( "/markets" 一个是问题所在。这是行之有效的市场调用：

export const fetchMarkets = createAsyncThunk(
"markets/fetchMarkets",
  async () => {
    const res = await axios.get(`/markets`);
    return res.data;
  }
);

我不能去工作的是这个，因为在/markets 之后是来自priceObj 的输入：

export const fetchCoin = createAsyncThunk(
"coin/fetchCoin",
  async (priceObj) => {
    const { exchange, pair } = priceObj;
    const res = await axios.get(
      `/markets/${exchange}/${pair}/price`
    );
    return res.data;
  }
);

关于如何使第二个调用与中间件一起工作的任何想法。如果我只是用硬编码参数将它粘贴到浏览器中，它就可以正常工作。通过 axios 和中间件运行，我得到一个 404。我意识到应该有另一个代理到 "/markets 进行第二次调用，但不知道如何设置该代理。

【问题讨论】：

标签： reactjs axios

【解决方案1】：

我发现了问题。这是一个从我的priceObj 解构的错误命名变量，它应该是coinPair 而不是pair，这使它在我的路径中未定义。

【讨论】：