Node.JS路由接收req.params.id时混入jumbotron.css的问题排查

你遇到的这个情况其实挺常见的——jumbotron.css会被当成路由参数传入，本质是浏览器加载页面时自动发起了对这个静态资源的请求，而你的/find/:_id路由是个“通吃”的通用匹配路由，只要请求路径以/find/开头，不管后面跟着什么都会被这个路由接住，包括浏览器请求静态资源的请求。

举个例子：如果你的页面里用<link>标签引用了jumbotron.css，但引用路径写得有问题（比如用了相对路径），浏览器可能会把这个CSS的请求路径解析成/find/jumbotron.css，刚好命中你的这个路由，于是req.params._id就变成了jumbotron.css。

下面给你几个可行的解决办法：

1. 让静态资源请求优先被处理 #

在Express里，你要把静态资源中间件（express.static）的挂载放在所有业务路由的前面。这样当浏览器请求静态资源时，会先被这个中间件处理，不会落到你的/find/:_id路由里。

示例代码：

// 先处理静态资源，假设你的静态文件都放在public文件夹下
const path = require('path');
app.use(express.static(path.join(__dirname, 'public')));

// 再挂载你的业务路由
router.get('/find/:_id', (req, res) => {
  const id = req.params._id;
  console.log(id);
  Doc.findById(id)
    .then((doc)=>{
      res.render('table/content',{ title: doc.subject, docs: doc })
    })
    .catch((err)=>{
      console.log(err)
      res.status(404).send('找不到对应的文档');
    })
});

2. 给路由参数加格式限制 #

你的_id是MongoDB的ObjectId，格式是固定的24位十六进制字符串。你可以在路由里用正则表达式限制参数的格式，这样只有符合ObjectId格式的请求才会进入这个路由，像jumbotron.css这种不符合格式的请求就会被直接跳过。

修改后的路由代码：

// 用正则限制_id必须是24位十六进制字符串
router.get('/find/:_id([0-9a-fA-F]{24})', (req, res) => {
  const id = req.params._id;
  console.log(id);
  Doc.findById(id)
    .then((doc)=>{
      res.render('table/content',{ title: doc.subject, docs: doc })
    })
    .catch((err)=>{
      console.log(err)
      res.status(404).send('找不到对应的文档');
    })
});

3. 检查页面里静态资源的引用路径 #

最后别忘了检查页面中jumbotron.css的引用路径是否正确。比如如果你的CSS文件放在public/css/目录下，正确的引用应该是：

<link rel="stylesheet" href="/css/jumbotron.css">

别用相对路径（比如jumbotron.css或者./jumbotron.css），不然浏览器很可能会在错误的路径下请求这个资源，再次触发你的路由。

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