如何在Express.js中提取URL中#后的参数值？

首先得明确一个关键事实：URL中的哈希（#之后的部分）不会被浏览器发送到服务器。不管你是直接访问example.org/#param=123，还是通过链接跳转过去，服务器收到的请求路径永远是/，哈希部分完全留在浏览器端处理。这也是为什么你没法直接用Express的req.params或req.query拿到这部分内容。

那要怎么处理这类参数呢？得通过前端主动传递的方式，下面是几种常见场景的解决方案：

1. 前端主动将哈希参数传给后端 #

如果你的场景是前端需要把哈希里的参数发给后端处理，可以用浏览器的location.hash API先获取哈希部分，再通过接口请求传递给后端：

示例：前端传递哈希参数 #

// 前端代码（浏览器环境）
const hashStr = location.hash.slice(1); // 去掉开头的#，得到类似"param=123&foo=bar"的字符串
// 用POST请求传给后端
fetch('/api/handle-hash-params', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ hashParams: hashStr })
});

示例：Express后端解析参数 #

后端收到前端传过来的哈希字符串后，可以用Node.js内置的querystring模块（或者URLSearchParams）解析成对象：

const express = require('express');
const querystring = require('querystring');
const app = express();

app.use(express.json()); // 解析JSON请求体

app.post('/api/handle-hash-params', (req, res) => {
  const hashParamsStr = req.body.hashParams;
  const parsedParams = querystring.parse(hashParamsStr);
  // parsedParams 现在是 { param: '123', foo: 'bar' }
  console.log('Received hash params:', parsedParams);
  res.json({ success: true, params: parsedParams });
});

app.listen(3000);

2. 前端重定向为带查询参数的URL #

如果希望用户访问带哈希的URL时，后端能直接拿到参数，可以让前端读取哈希后，重定向到带查询参数的路径：

示例：前端重定向 #

// 页面加载时执行
if (location.hash) {
  const hashParams = location.hash.slice(1);
  // 重定向到带查询参数的路径
  window.location.replace(`/processed?${hashParams}`);
}

示例：Express后端处理查询参数 #

这时候后端就可以用req.query直接获取参数了：

app.get('/processed', (req, res) => {
  // req.query 就是解析后的参数对象
  console.log('Params from hash (converted to query):', req.query);
  res.send('Processed your hash params!');
});

重要注意事项 #

• 哈希参数完全是浏览器端的范畴，服务器从不会主动收到这部分内容，所有处理都需要前端配合
• 如果是使用SSR（服务端渲染）框架，服务端渲染阶段也无法获取哈希，必须等客户端hydrate完成后再处理

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