`window.screen` 是一个不可直接序列化的 dom 对象，直接赋值给 ajax 的 `data` 会导致请求静默失败；需手动提取其可枚举属性（如 `width`、`height`、`colordepth` 等）构建纯 json 对象后再发送。
在前端与后端通信中，我们常希望收集用户设备的屏幕信息（例如用于响应式统计、A/B 测试或风控识别）。但 window.screen 并非普通 JavaScript 对象——它是一个宿主对象（host object），其大部分属性为不可枚举（non-enumerable），且部分属性（如 orientation）含有循环引用或 getter-only 访问器。这意味着：
- ✅ JSON.stringify(window.screen) 会返回 {}（空对象）；
- ❌ 直接将 window.screen 赋值给 data（如 data.w = window.screen）会导致 jQuery 的 $.ajax 在序列化阶段静默失败（尤其在 contentType: ‘application/x-www-form-urlencoded’ 或默认表单编码模式下），网络面板中甚至不显示请求发出；
- ? 浏览器控制台通常不会报错，仅表现为 success 回调不触发、error 回调也未进入——这是典型的序列化阻断行为。
正确做法：显式提取关键属性
只需创建一个轻量级 Plain Object，手动复制你真正需要的、可安全 JSON 序列化的属性：
const screenData = {
width: window.screen.width,
height: window.screen.height,
availWidth: window.screen.availWidth,
availHeight: window.screen.availHeight,
colorDepth: window.screen.colorDepth,
pixelDepth: window.screen.pixelDepth,
// 注意：orientation 是一个对象，需进一步扁平化（仅取必要字段）
orientationType: window.screen.orientation?.type || 'unknown',
orientationAngle: window.screen.orientation?.angle || 0
};
$.ajax({
method: 'POST',
url: '/tested-route',
crossDomain: true,
contentType: 'application/json; charset=utf-8', // 明确声明 JSON 类型
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('value'),
'Accept': 'application/json'
},
data: JSON.stringify(screenData), // ⚠️ 必须手动 stringify
success: function(response) {
console.log('Screen data sent successfully:', response);
},
error: function(jqXHR, textStatus, errorThrown) {
console.error('AJAX failed:', textStatus, errorThrown);
console.log('Response:', jqXHR.responseText);
}
});
关键注意事项：
- 不要混用 contentType: false 和 JSON 数据：contentType: false 会禁用自动头设置，适用于 FormData 上传，但与 JSON.stringify() 冲突。此处应设为 ‘application/json‘ 并手动序列化。
- 避免访问不可靠属性：window.screen.orientation 在部分旧浏览器或 iframe 中可能为 undefined，务必使用可选链（?.）或兜底值。
- 服务端需匹配解析逻辑：后端应按标准 JSON 解析（如 Express 中使用 express.json() 中间件），而非尝试解析表单格式。
- 隐私与合规提醒：screen 信息虽不属 GDPR 严格定义的“个人数据”，但在某些场景（如精准设备指纹）下可能涉及隐私政策要求，建议在采集前明确告知用户并提供开关选项。
总结
传递 window.screen 的本质不是“发送对象”，而是“上报特征”。始终遵循「提取 → 扁平化 → 序列化」三步原则，既保证兼容性，又提升可维护性与调试效率。对于更复杂的客户端环境探测（如 DPR、touch support、prefers-reduced-motion），同样适用该范式——只传所需，不传对象。