如何在Express中传递含哈希的URI作为路由参数？

这个问题我之前也碰到过，核心原因其实和哈希（#）的特性、浏览器缓存以及Express路由匹配规则都有关系，咱们一步步拆解解决：

先搞懂哈希的本质 #

首先要明确：浏览器不会把URL中的哈希及后面的内容直接发送到服务器——哈希是纯客户端的标识，用来定位页面内锚点。但你这里的情况是哈希被包含在encodeURIComponent编码后的:URI参数里，这时候如果编码正确，#会被转成%23，服务器是能收到这个编码后的完整字符串的。

你遇到301且缓存开启时失效的情况，大概率是两个问题叠加：

1. 浏览器缓存了之前错误的永久重定向（301）结果；
2. 路由匹配规则没有正确覆盖编码后包含%23的参数。

具体解决方案 #

1. 确保客户端正确编码哈希 #

首先检查客户端代码，确保encodeURIComponent确实把#转成了%23。比如：

const targetUri = 'foobar/bla#blabla-313fe4ce-4f8d-48b7-b0f3-a59844402ee8';
const encoded = encodeURIComponent(targetUri);
// 正确结果应该是：foobar%2Fbla%23blabla-313fe4ce-4f8d-48b7-b0f3-a59844402ee8
fetch(`/api/${encoded}`)
  .then(res => res.json())
  .then(/* 处理逻辑 */);

如果客户端没正确编码，哈希会被浏览器截断，导致服务器收到的参数不完整，进而触发路由不匹配，返回301。

2. 调整Express路由匹配规则 #

默认情况下，Express的:URI参数只会匹配除了/之外的字符。如果你的编码后的参数里包含%2F（即原URI中的/），:URI就会匹配不全，导致路由不匹配触发301。这种情况下，改用通配符*来匹配所有后续路径：

// 用*匹配/api/之后的所有内容，包括编码后的/和#
app.get('/api/*', (req, res) => {
  // 解码拿到原始URI（包含哈希）
  const originalUri = decodeURIComponent(req.params[0]);
  doStuff(originalUri);
  res.send('处理完成');
});

3. 清除/禁用浏览器缓存 #

301是永久重定向，浏览器会长期缓存这个结果——哪怕你后来修复了路由，浏览器还是会直接走缓存的重定向路径。解决方法有两个：

• 临时方案：手动清除浏览器缓存，或者用隐私模式测试；
• 永久方案：在路由处理函数中添加缓存控制头，禁止浏览器缓存该路由的响应：

app.get('/api/:URI', (req, res) => {
  // 禁止缓存，避免301被永久缓存
  res.set('Cache-Control', 'no-store, no-cache, must-revalidate, private');
  
  const decodedUri = decodeURIComponent(req.params.URI);
  doStuff(decodedUri);
  res.send('处理完成');
});

为什么禁用缓存就正常？ #

因为之前错误的301响应被浏览器缓存了，禁用缓存后，浏览器会重新向服务器发起请求，此时如果参数编码正确、路由匹配正常，就能正确命中你的处理逻辑了。

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