Docker部署Traefik后含#的URL重定向问题求助

问题根源 #

URL中的#是浏览器端的锚点标识符，当浏览器发送HTTP请求时，#及后面的内容不会被传递到服务器端。Traefik作为服务器端的反向代理，根本接收不到这部分内容，所以用PathPrefix(/#/foo)这类规则自然无法匹配。

解决方案 #

方案1：浏览器端JS直接处理（最直接有效）

既然只有浏览器能拿到完整的URL锚点内容，直接在example.net的页面中添加一段JS代码，检测锚点并跳转：

window.addEventListener('load', () => {
  const hash = window.location.hash;
  // 匹配所有以#/foo开头的锚点路径
  if (hash.startsWith('#/foo')) {
    window.location.href = `https://example2.net${hash}`;
  }
});

这段代码会在页面加载时检查当前URL的锚点，如果符合规则，直接跳转到example2.net对应的锚点路径，完全不需要Traefik参与。

方案2：Traefik配合前端跳转（适用于需统一入口的场景）

如果必须通过Traefik触发跳转，可以先把example.net的所有请求转发到一个中间页面，再由页面处理锚点：

1. Traefik配置（Docker标签示例）：

labels:
  - "traefik.http.routers.example-net.rule=Host(`example.net`)"
  - "traefik.http.routers.example-net.middlewares=redirect-base"
  - "traefik.http.middlewares.redirect-base.redirectregex.regex=^https://example.net/(.*)"
  - "traefik.http.middlewares.redirect-base.redirectregex.replacement=https://example2.net/$1"

2. 在example2.net的入口页面添加方案1中的JS代码，处理锚点跳转。

关键注意点 #

• 服务器端无法获取URL中的锚点内容，所有依赖服务器的路由规则都无法直接匹配#后面的部分。
• 如果是Vue、React这类单页应用，可以直接在前端路由配置中添加对应跳转规则，原理和JS代码处理一致。

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