Next.js使用SWR搭配axios时定时刷新出现JSON解析错误问题

• 路径配置错误
  你在getStaticPaths中请求后端接口时使用了带域名前缀的${server}/api/orders，但客户端运行的fetcher中使用的是相对路径/orders/detail/。首次渲染时数据由getStaticProps预取，不需要走客户端请求，所以运行正常；开启定时刷新后，SWR触发客户端请求，若后端API未和前端部署在同域同路径下，请求会返回404错误，大多数后端的404页面是HTML格式，开头为<字符，JSON解析时就会抛出Unexpected token < in JSON at position 0的错误。
• fetcher修改逻辑错误
  fetch API返回的是标准Response对象，不存在data属性，data是axios封装后才有的字段。你将解析逻辑改为(r)=>r.data后，返回值为undefined，SWR判定数据未加载完成，因此页面一直显示Loading...。

// 1. 给fetcher的请求路径加上和后端一致的域名前缀，同时添加请求成功校验
const fetcher = (url, params) => {
  const fullUrl = `${server}${url}${params.cid}/${params.oid}`
  return fetch(fullUrl).then((r) => {
    // 先校验请求状态，避免解析非JSON内容
    if (!r.ok) throw new Error(`请求失败，状态码：${r.status}`)
    return r.json()
  })
}

• 确认后端接口配置了正确的CORS规则，允许前端域名发起跨域请求。
• 若使用了反向代理，确认代理规则可以正确匹配/orders/detail/前缀的请求，转发到对应的后端服务。

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