NextJS中React向API传new Date()出现3小时时差问题

这不是框架异常，是JavaScript原生Date对象的序列化、显示规则导致的必然结果：

1. Date对象内部存储的永远是UTC+0时区下从1970-01-01 00:00:00开始计算的毫秒时间戳，本身不携带任何时区属性。你在前端控制台打印new Date()看到本地时间，是浏览器控制台自动按当前系统时区做了格式化显示，不代表对象本身存的是本地时间值。
2. 你把Date对象直接放到请求体发送时，请求体做JSON序列化的过程中会自动调用Date.prototype.toJSON()方法，该方法默认返回UTC+0时区的ISO格式时间字符串，末尾带Z标识。你在UTC+3时区，本地时间23:30:30对应的UTC时间正好是20:30:30，所以服务端拿到序列化后的字符串打印出来自然差3小时，不存在时间值传错的问题，只是时区显示不一致。

根据你的业务需求选对应方案即可：

• 方案1：传绝对时间戳（最推荐，无时区歧义）
  前端不要直接传Date对象，直接传Date内部的毫秒时间戳，时间戳是和时区无关的绝对时间值，前后端拿到后可以根据需要自行转成对应时区的显示格式：

  // 前端发送代码
  send({ currentTime: Date.now() })
  
  // 任意端使用时转成Date对象即可
  const targetTime = new Date(req.body.currentTime)
  

• 方案2：前端主动传格式化后的本地时间字符串
  如果你需要服务端直接拿到和前端显示完全一致的本地时间文本，就在发送前手动把Date转成对应格式的字符串，不要依赖默认序列化：

  // 前端发送时手动转成本地时间字符串
  const localTime = new Date().toLocaleString()
  // 也可以额外传时区偏移量，方便服务端做校验换算
  send({
    currentTime: localTime,
    timezoneOffset: new Date().getTimezoneOffset()
  })
  

• 方案3：服务端按指定时区格式化时间
  如果你不需要改前端传参逻辑，因为服务端拿到的UTC时间对应的绝对时间点是完全准确的，只需要在打印/使用时指定UTC+3时区做格式化即可：

  // NodeJS服务端处理代码
  const utcTime = new Date(req.body.currentTime)
  const localTimeStr = new Intl.DateTimeFormat('zh-CN', {
    timeZone: 'Asia/Baghdad', // 替换为你所在的UTC+3对应时区
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  }).format(utcTime)
  console.log(localTimeStr) // 输出和前端一致的23:30:30
  

注意：不要依赖默认的Date字符串序列化传递带时区的时间，只要涉及跨端时间传递，优先用时间戳，能避免绝大多数时区相关bug。

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