一个由于全局变量造成express路由重复堆叠的问题案例

一个用express运行react项目，在页面跳转时会出现很奇怪的问题，就是页面404，然后一看原来是路由堆叠了，路径重复写入，现象如下：

 为什么会出现这个问题呢，一开始没发现，找来找去没有线索，后来问了chatgpt马上就是找到了问题的关键： 原来是url作为全局变量，被不断的更新了值。

let url = "http://82.157.43.234:8080";  // url不能定义在这里，否则会产生路由堆叠问题

 

app.get("/api/:path", (req, res) => {

  // let url = "http://82.157.43.234:8080/api/";

  var path = req.params.path;

  url = url + req.path;

  console.log("url is ",url)

  axios

    .get(url, { params: req.query })

    .then((response) => {

      res.json(response.data);

    })

    .catch((e) => {

      console.log(e);

    });

});

 

代码的问题在于，每次请求进来时，你都将请求的URL路径添加到了全局的 url 变量中，这会导致新的请求不断地附加路径到 url 变量，从而出现路径堆叠的问题。

要解决这个问题，你可以修改代码，将 url 的赋值移到路由处理程序内部，而不是在全局范围内：

 

 chatgpt果然牛逼，一眼就看到了关键。

确实是全局变量带来的锅，把全局变量移到函数内部变成局部变量，问题解决。

在路由这种场景，函数内部一定不要使用全局变量，否则发生变量污染，造成路由重复堆叠