AJAX安全传递屏幕信息到后端方法

`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），同样适用该范式——只传所需，不传对象。