JWT刷新验证接口报Cannot POST及JSON解析错误如何解决

问题原因排查&修复方案 #

1. 核心错误：HTTP请求方法不匹配 #

你服务端定义的is-verify路由是GET类型：

router.get("/is-verify", authorization, (res, req) => {

但客户端App.js里发请求用的是POST方法，所以服务端找不到对应POST路由，返回404错误，同时返回的HTML格式报错页面Cannot POST /auth/is-verify无法被解析为JSON，就出现了Unexpected token < in JSON at position 0的第二个报错。

修复：统一请求方法，两边都用GET即可

修改App.js里的isAuth方法的请求method：

const response = await fetch("http://localhost:3000/auth/is-verify", {
  method: "GET", // 把POST改成GET
  headers: {token: localStorage.token}
})

2. 路由回调参数顺序错误 #

你is-verify路由的回调函数参数写反了，Express路由回调的第一个参数永远是请求对象req，第二个是响应对象res：

// 错误写法
router.get("/is-verify", authorization, (res, req) => {
// 正确写法
router.get("/is-verify", authorization, (req, res) => {

如果顺序写反，后续你调用res.json的时候实际调用的是请求对象的方法，会直接报错。

3. 缺少状态更新逻辑 #

你现在isAuth方法拿到验证结果之后，没有更新isAuthenticated状态，所以就算验证通过，页面也不会自动跳转到Dashboard，补充逻辑：

async function isAuth() {
  try {
    const response = await fetch("http://localhost:3000/auth/is-verify", {
      method: "GET", 
      headers: {token: localStorage.token}
    })
    const parseRes = await response.json(); 
    // 补充状态更新
    setIsAuthenticated(parseRes === true);
  } catch (err) {
    setIsAuthenticated(false);
    console.log(err.message); 
  }
}

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