Node.js Express服务端如何检测API请求的浏览器类型并区分终端？

嘿，这个需求我太熟了！在Express服务端区分桌面、平板请求并识别浏览器类型，核心就是解析请求头里的User-Agent字段。下面给你两种实用方案，手动解析和用成熟库，按需选就行。

方案一：手动解析User-Agent（适合简单场景） #

如果你的需求不复杂，不想引入额外依赖，可以自己写个简单的中间件来解析。核心就是通过正则匹配UA里的关键词。

比如下面这个中间件，会把解析后的设备类型和浏览器信息挂载到req对象上，后续路由里直接用就行：

// 自定义UA解析中间件
app.use((req, res, next) => {
  const userAgent = req.headers['user-agent'] || '';
  
  // 检测设备类型：桌面/平板
  let deviceType = 'desktop';
  // 匹配常见平板的UA关键词（iPad、Android平板等）
  const isTablet = /(iPad|Android(?!.*Mobile)|Tablet|Kindle|Silk)/i.test(userAgent);
  if (isTablet) {
    deviceType = 'tablet';
  }
  
  // 检测浏览器类型
  let browser = 'unknown';
  if (/Chrome/i.test(userAgent)) browser = 'chrome';
  else if (/Safari/i.test(userAgent) && !/Chrome/i.test(userAgent)) browser = 'safari';
  else if (/Firefox/i.test(userAgent)) browser = 'firefox';
  else if (/Edge/i.test(userAgent)) browser = 'edge';
  // 可以继续加其他浏览器的匹配规则
  
  // 挂载到req对象，后续路由可用
  req.deviceInfo = {
    type: deviceType,
    browser: browser
  };
  
  next();
});

// 示例路由
app.get('/api/data', (req, res) => {
  const { type: deviceType, browser } = req.deviceInfo;
  console.log(`请求来自${deviceType}设备，浏览器是${browser}`);
  
  if (deviceType === 'tablet') {
    // 平板请求的逻辑
    res.json({ message: '这是平板专属响应', data: [] });
  } else {
    // 桌面请求的逻辑
    res.json({ message: '这是桌面专属响应', data: [] });
  }
});

不过手动解析的缺点也很明显：新的设备或浏览器出来时，你得自己更新正则，容易漏判。如果是生产环境，更推荐用成熟的库。

方案二：使用专业库（推荐生产环境） #

有几个专门解析UA的npm包，比如ua-parser-js或者useragent，它们维护了大量的设备和浏览器规则，准确率高。这里以ua-parser-js为例，步骤如下：

1. 先安装依赖：

npm install ua-parser-js

2. 写一个中间件来解析：

const { UAParser } = require('ua-parser-js');

// UA解析中间件
app.use((req, res, next) => {
  const parser = new UAParser(req.headers['user-agent']);
  const result = parser.getResult();
  
  // 整理设备类型：区分桌面和平板
  let deviceType = 'desktop';
  // parser返回的device.type可能是'console'、'mobile'、'tablet'、'smarttv'等，我们只关注tablet和桌面
  if (result.device.type === 'tablet') {
    deviceType = 'tablet';
  } else if (result.device.type === undefined && !/Mobile/i.test(req.headers['user-agent'])) {
    // 没有检测到设备类型且不是移动设备，默认桌面
    deviceType = 'desktop';
  }
  
  // 整理浏览器信息
  const browser = result.browser.name || 'unknown';
  
  req.deviceInfo = {
    type: deviceType,
    browser: browser,
    // 还可以加更多信息，比如操作系统：result.os.name
  };
  
  next();
});

// 示例路由使用
app.get('/api/user', (req, res) => {
  const { type: deviceType, browser } = req.deviceInfo;
  res.json({
    message: `你正在用${browser}浏览器，设备类型是${deviceType}`,
    // 根据设备类型返回不同数据
    data: deviceType === 'tablet' ? ['平板数据1', '平板数据2'] : ['桌面数据1', '桌面数据2']
  });
});

这个库会帮你处理各种复杂的UA情况，比如有些Android平板的UA不带Mobile关键词，它能准确识别出来，比手动正则靠谱多了。

注意事项 #

• User-Agent是可以伪造的，所以如果是涉及安全的场景，不能完全依赖它，但一般的API适配场景完全够用。
• 如果你需要区分手机和平板，上面的代码已经处理了，result.device.type为'mobile'就是手机，'tablet'是平板。
• 定期更新依赖库，因为新的设备和浏览器会不断出现，库的维护者会更新规则。

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