添加CSS样式表到EJS文件后Express异步路由页面无限加载如何排查

这个问题和async异步设置本身没有直接关联，本质是路由匹配规则和静态资源路径解析的冲突，刚好和你异步路由的路径规则叠加触发了异常。

大部分情况下的触发场景如下：
你配置的异步路由是带动态参数的多级路径（比如/article/:id这类格式），而EJS文件中引用CSS用的是相对路径（比如href="css/style.css"）。当你访问异步路由对应的页面时，浏览器会根据当前页面的路径拼接相对资源路径，比如访问/article/1时，CSS的请求地址会变成/article/css/style.css，这个请求会优先命中你的异步路由规则，不会走到Express的静态资源中间件。而你的异步路由没有处理这类CSS资源请求，也没有调用next()传递请求，就会导致CSS请求一直挂起，浏览器会等待CSS加载完成才渲染页面，所以出现页面一直加载、无内容的情况。删除CSS引用后没有额外的资源请求，路由就可以正常返回页面内容。

• 第一步：调整CSS引用路径为绝对路径，路径以/开头，比如CSS存放在public/css目录下就写为href="/css/style.css"，代表从站点根目录查找资源，不会随当前页面路径变化拼接，这是最快的修复方案
• 第二步：检查Express中间件注册顺序，静态资源中间件express.static必须注册在所有业务路由之前，避免业务路由优先拦截静态资源请求：

  const path = require('path')
  // 先注册静态资源中间件
  app.use(express.static(path.join(__dirname, 'public')))
  // 再注册业务路由
  app.get('/sync-route', (req, res) => {
    res.render('file.ejs')
  })
  app.get('/async-route', async (req, res) => {
    // 异步逻辑
    res.render('file.ejs')
  })
  

• 第三步：给异步路由处理函数加try-catch捕获异常，避免异步操作异常未捕获导致请求挂起：

  app.get('/async-route', async (req, res, next) => {
    try {
      // 你的异步逻辑，比如数据库查询、接口请求
      const pageData = await queryData()
      res.render('file.ejs', { pageData })
    } catch (err) {
      // 传递错误给Express错误处理中间件
      next(err)
    }
  })
  

• 第四步：如果确实需要用多级动态路由，可以给路由加规则过滤，比如只处理Accept请求头为html的请求，避免拦截静态资源：

  app.get('/article/:id', async (req, res, next) => {
    if (!req.accepts('html')) return next()
    // 后续业务逻辑
  })
  

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