Next.ts前端点击笔记的Get请求未被Express后端处理求助

笔记页面中，用户点击单条笔记时，前端（Next.ts）通过fetch发起GET请求到Express后端校验请求者是否为笔记所有者，但请求完全未被处理：

• 前端handleOpenDialog函数中fetch前的日志可正常打印，但fetch无响应
• 后端对应路由的console.log('hello')从未触发
• 其他路由可正常工作
• 前端源为127.0.0.1:3000，后端为127.0.0.1:8000，已配置CORS允许该源

核心代码片段 #

前端（Next.ts） #

const handleOpenDialog = async (note:Note)=>{
        const data = await fetch(`http://127.0.0.1:8000/notes/${note.slug}/`,{credentials:'include'})
        console.log(data)
    }

后端（Express）路由 #

router.get('/notes/:slug',async (req:Request,res:Response)=>{
    console.log('hello')
    const param = req.params.slug
    const user = await pool.query('SELECT user FROM note WHERE slug = $1 ',[param])
    if(req.session!.userId == user.rows[0]){
        res.status(200).json({isOwner:true})
    }
    else{
        res.status(401).json({isOwner:false})
    }
})

CORS配置 #

app.use(cors({
    'origin':['http://localhost:3000','http://127.0.0.1:3000'],
    'credentials':true,
}))

1. 修复URL斜杠匹配问题 #

前端请求URL末尾带有斜杠（/notes/${note.slug}/），但后端路由定义为/notes/:slug（末尾无斜杠），Express路由匹配严格区分斜杠，导致请求无法命中路由。

解决方式二选一：

• 前端移除URL末尾斜杠：

  const data = await fetch(`http://127.0.0.1:8000/notes/${note.slug}`,{credentials:'include'})
  

• 后端路由添加可选斜杠匹配：

  router.get('/notes/:slug/?',async (req:Request,res:Response)=>{
      // 原有代码保留
  })
  

2. 校验note.slug的有效性 #

确认note.slug是否为空、包含未编码的特殊字符（如空格、中文），导致URL格式错误。可以在fetch前打印slug值排查：

const handleOpenDialog = async (note:Note)=>{
        console.log('当前slug:', note.slug);
        // 对特殊字符编码
        const encodedSlug = encodeURIComponent(note.slug);
        const data = await fetch(`http://127.0.0.1:8000/notes/${encodedSlug}`,{credentials:'include'})
        console.log(data)
    }

3. 修复后端代码的异常与逻辑错误 #

3.1 捕获异步请求异常 #

后端pool.query未做异常捕获，若SQL执行出错（比如表/字段错误），会导致Promise挂起，无法返回响应：

router.get('/notes/:slug',async (req:Request,res:Response)=>{
    try {
        console.log('hello')
        const param = req.params.slug
        // user是SQL关键字，需用引号包裹避免语法错误
        const userResult = await pool.query('SELECT "user" FROM note WHERE slug = $1 ',[param])
        
        // rows[0]是对象，需提取对应字段值
        if(req.session?.userId === userResult.rows[0]?.user){
            res.status(200).json({isOwner:true})
        } else {
            res.status(401).json({isOwner:false})
        }
    } catch (err) {
        console.error('请求处理出错:', err);
        res.status(500).json({error: '服务器内部错误'});
    }
})

3.2 修正SQL与数据比较逻辑 #

• SELECT user FROM note中user是SQL关键字，需用双引号/反引号包裹（如"user"）
• user.rows[0]返回的是对象（如{ user: 'xxx' }），直接和req.session.userId比较会不相等，需提取字段值userResult.rows[0]?.user

4. 检查路由挂载顺序 #

确保/notes/:slug路由挂载在通用路由（如/notes）之前，避免被更宽泛的路由规则拦截。

5. 查看浏览器网络请求详情 #

打开浏览器开发者工具（F12）的Network面板，查看请求状态：

• 若为pending：后端未返回响应，大概率是未捕获的异步异常
• 若为404：路由匹配失败，回到步骤1排查
• 若为500：后端代码报错，查看后端控制台的错误日志

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