Node.js中Express框架URL参数引发路由路径错误问题

我来帮你拆解下问题根源，再给出具体的解决方案：

问题出在哪？ #

1. HTML文件路径指向错误：你的index.html实际存放在public目录下，但在/:country路由里，你写的res.sendFile(__dirname + '/index.html')会让Express去项目根目录找这个文件，而非public目录，这直接导致了404错误。
2. 静态资源相对路径失效：当访问/usa这类带参数的路由时，浏览器会默认把当前路径识别为/usa/，所以index.html里引用的app.js会被解析成/usa/app.js，但你的静态资源都在根路径的public文件夹下，自然找不到这个不存在的路径。

具体解决方案 #

步骤1：修正HTML文件的发送路径 #

不管是根路由还是带参数的路由，都要明确指向public目录下的index.html，推荐用sendFile的root参数来避免手动拼接路径出错：

app.use(express.static(__dirname + '/public'));

app.get('/', (req, res) => {
  res.sendFile('index.html', { root: __dirname + '/public' });
});

app.get('/:country', (req, res) => {
  // 注意：sendFile的第二个参数里的{country: req.params.country}不会生效，因为sendFile只发送静态文件，不处理模板变量，参数传递问题后面会补充
  res.sendFile('index.html', { root: __dirname + '/public' });
});

步骤2：修复静态资源的引用路径 #

把index.html里的app.js引用改成绝对路径，这样不管当前路由是什么，浏览器都会从根路径请求静态资源：

<script type="text/javascript" src="/app.js"></script>

额外优化：统一处理所有路由（可选） #

如果你的应用是单页应用，想让所有路由都返回index.html，可以用通配符路由统一处理，避免重复代码：

app.use(express.static(__dirname + '/public'));

// 处理所有GET请求，返回index.html
app.get('*', (req, res) => {
  res.sendFile('index.html', { root: __dirname + '/public' });
});

关于URL参数传递的补充 #

另外要提醒你：sendFile的第二个参数里的{country: req.params.country}是无效的，因为sendFile仅负责发送静态文件，不会解析模板变量。如果要把country参数传递给前端的app.js，可以试试这些方法：

• 在路由里设置cookie，前端通过document.cookie读取
• 用模板引擎（比如EJS）替代静态HTML，直接把变量注入页面中
• 在返回HTML前，通过脚本标签把参数挂载到全局对象上

调整完这些后，访问http://localhost:3000/usa时，Express会正确返回public下的index.html，浏览器也会从根路径请求app.js，路径异常的问题就解决了。

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