Telegram桌面端History API的pushState重复发送GET请求问题求助

你遇到的是Telegram桌面端内置WebView的特有行为——它会监听pushState()的调用，当检测到路径（pathname）变化时，会自动发起一次GET请求到新URL，导致重复请求。而移动端和网页版的WebView/浏览器遵循标准History API规范，pushState()本身不会触发页面请求，仅修改历史记录和地址栏。

解决方案 #

1. 改用Hash路由（推荐）

Hash（#）后的内容不会被发送到后端，Telegram桌面端也不会对Hash变化发起请求。修改代码如下：

const Router = {
  async handleChange(e) {
    const path = e.target.getAttribute('data-path'); // 仅存路由路径，比如"/about"
    const apiUrl = `/api${path}`; // 真实的后端接口地址

    if (path) {
      const res = await axios.get(apiUrl);
      document.getElementById('content').innerHTML = res.data;
      // 用Hash更新地址栏，不会触发后端请求
      window.history.pushState(res.data, '', `#${path}`);
    }
  },
};

// 处理浏览器前进/后退的popstate事件
window.addEventListener('popstate', (e) => {
  if (e.state) {
    // 直接从state中恢复内容，无需重复请求
    document.getElementById('content').innerHTML = e.state;
  } else {
    // 初始页面或无state时，手动加载对应内容
    const currentPath = window.location.hash.slice(1);
    if (currentPath) {
      axios.get(`/api/${currentPath}`).then(res => {
        document.getElementById('content').innerHTML = res.data;
      });
    }
  }
});

2. 避免修改Pathname，仅用State存储数据

如果必须保持地址栏无Hash，可以只修改pushState()的state参数，不改变pathname：

const Router = {
  async handleChange(e) {
    const url = e.target.getAttribute('data-url');
    const path = new URL(url).pathname; // 提取路径用于标识路由

    if (url) {
      const res = await axios.get(url);
      document.getElementById('content').innerHTML = res.data;
      // 不修改pathname，仅更新state和标题
      window.history.pushState({ data: res.data, path }, '', window.location.pathname);
    }
  },
};

// 处理popstate时根据state中的path加载内容
window.addEventListener('popstate', (e) => {
  if (e.state?.path) {
    axios.get(`/api${e.state.path}`).then(res => {
      document.getElementById('content').innerHTML = res.data;
    });
  }
});

3. 后端适配（兜底方案）

如果上述前端方案无法满足需求，可以让后端对所有路由请求返回同一个HTML页面，前端在页面加载完成后根据当前pathname动态加载内容。这种方式下，Telegram桌面端发起的额外请求不会返回错误，前端也能正常接管路由逻辑。

总结 #

Telegram桌面端的这个行为属于其WebView的非标准实现，目前没有官方文档明确说明，但通过Hash路由或仅使用State存储路由信息可以有效规避重复请求问题。

内容的提问来源于stack exchange，提问作者Timolio