JavaScript可自动收集客户端设备信息并注入请求：通过navigator、screen、window等API同步获取UA、语言、DPR、屏幕/视口尺寸、时区等，推荐Base64编码后设为请求头X-Device-Info，再封装通用request函数实现复用，需注意隐私合规与服务端容错。
JavaScript 可以在接口请求前自动收集客户端设备信息（如浏览器类型、版本、操作系统、屏幕尺寸、语言、是否为移动设备等），并将其作为请求头或请求参数发送到后端。关键在于利用浏览器提供的标准 API 获取信息，并在请求发起环节统一注入。
常用设备信息获取方式
以下信息均可通过 JavaScript 同步获取，无需额外权限或用户交互：
-
User-Agent 字符串：
navigator.userAgent—— 包含浏览器、内核、OS 等基础信息，后端可解析出大部分设备特征 -
浏览器语言：
navigator.language || navigator.userLanguage—— 如zh-CN、en-US -
设备像素比：
window.devicePixelRatio—— 判断高清屏（如 2.0 表示 Retina） -
屏幕与视口尺寸：
screen.width/height、window.innerWidth/innerHeight—— 辅助识别设备类型（如宽 -
是否为移动设备（启发式判断）：
/(mobile|android|ios|iphone|ipad)/i.test(navigator.userAgent)或检查navigator.maxTouchPoints > 0 -
时区与语言环境：
Intl.DateTimeFormat().resolvedOptions().timeZone、navigator.platform
注入到请求中的两种主流方式
推荐在请求发出前统一处理，避免每个接口手动拼接：
-
添加到请求头（推荐）：适合后端统一日志、风控、AB 测试等场景
例如使用fetch时：const deviceInfo = { ua: navigator.userAgent, lang: navigator.language, dpr: window.devicePixelRatio, width: screen.width, height: screen.height, isMobile: /mobile/i.test(navigator.userAgent), tz: Intl.DateTimeFormat().resolvedOptions().timeZone }; fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-Device-Info': btoa(JSON.stringify(deviceInfo)) // Base64 编码防格式问题 }, body: JSON.stringify({ username: 'a', password: 'b' }) }); -
合并进请求体或查询参数：适合需透传给业务逻辑的场景（如埋点上报、首次登录设备绑定）
注意：GET 请求建议用 query 参数（长度受限），POST 推荐放 body 中的device字段
封装成通用请求函数（实用建议）
把设备采集和请求逻辑抽离，便于维护和复用：
立即学习“Java免费学习笔记（深入）”；
function request(url, options = {}) {
const deviceInfo = getDeviceInfo(); // 封装好的采集函数
const headers = {
...options.headers,
'X-Device-Info': btoa(JSON.stringify(deviceInfo))
};
return fetch(url, {
...options,
headers
});
}
function getDeviceInfo() {
return {
ua: navigator.userAgent,
lang: navigator.language,
dpr: window.devicePixelRatio,
viewport: { w: window.innerWidth, h: window.innerHeight },
screen: { w: screen.width, h: screen.height },
isMobile: /mobile|android|ios|iphone|ipad/i.test(navigator.userAgent),
tz: Intl.DateTimeFormat().resolvedOptions().timeZone,
referrer: document.referrer
};
}
后续所有请求只需调用 request('/api/xxx', { method: 'POST', body: ... }) 即可自动携带设备信息。
注意事项与边界情况
实际使用中需注意以下几点：
- User-Agent 可被伪造或禁用：不能用于强安全校验（如身份认证），仅作辅助识别
- 隐私合规（GDPR / 个人信息保护法）：若设备信息可关联到自然人（如结合 IP、账号），需明确告知用户并获得授权；避免收集 IMEI、MAC 地址等敏感字段（浏览器也已限制访问）
-
服务端需做容错解析：前端字段可能缺失（如某些浏览器不支持
Intl）、格式异常，后端应有默认值和降级逻辑 - 避免重复采集开销：设备信息在单页生命周期内基本不变，可缓存一次结果，不必每次请求都重新计算
