Nuxt.js的index.js触发SyntaxError: Unexpected token o in JSON错误如何解决

• 核心问题出在cart = (parsed.cart && JSON.parse(parsed.cart)) || []这行代码的JSON.parse调用环节。当你存储到cookie里的cart值不是标准JSON格式字符串时，就会触发该语法错误。
• 常见触发场景：
  • 调试时直接把JS对象（未转JSON字符串）存入cookie，cookie会自动调用对象的toString()方法，得到[object Object]这类字符串，JSON.parse解析到第二个字符o时就会抛出position 1的错误
  • 前端存cart数据时没有先调用JSON.stringify()转成字符串，直接存了原始数组/对象
  • cookie中的cart值被篡改、或者初始化时写入了非JSON格式的字符串
• 额外隐患：如果req.headers.cookie不存在，cart变量会是undefined，直接提交给store可能导致后续业务逻辑异常

修复后的完整代码如下：

import cookieparser from 'cookieparser'
export const actions = {
  nuxtServerInit({ commit }, { req }) {
    // 合并重复的cookie解析逻辑
    let parsedCookie = {}
    // 项目不支持可选链的话，替换为 req && req.headers && req.headers.cookie 即可
    if (req?.headers?.cookie) {
      parsedCookie = cookieparser.parse(req.headers.cookie)
    }

    // 处理userjwt逻辑
    if (parsedCookie.userjwt === 'null') {
      commit('auth/setUser', null)
    } else {
      commit('auth/setUser', parsedCookie.userjwt || null)
    }

    // 处理cart逻辑，加异常捕获兜底
    let cart = []
    if (parsedCookie.cart) {
      try {
        cart = JSON.parse(parsedCookie.cart)
        // 类型校验确保结果为数组，可根据业务需求调整
        if (!Array.isArray(cart)) {
          cart = []
        }
      } catch (e) {
        // 解析失败直接用空数组兜底，不阻断渲染流程
        cart = []
      }
    }
    commit('cart/setItems', cart)
  },
}

主要修改点：

• 合并两次重复的cookie解析逻辑，减少不必要的性能开销
• 给JSON.parse包裹try catch异常捕获，解析失败时直接兜底为空数组，不会抛出语法错误阻断服务端渲染
• 新增cart解析后的类型校验，确保传给store的一定是符合预期的数组格式
• 给cart设置默认空数组，避免cookie不存在时变量为undefined的问题
• 源头上的优化：检查前端存cart到cookie的逻辑，确保写入前一定调用JSON.stringify(cart)转成标准JSON字符串，避免非合规值存入cookie

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