Node Express API搭配React实现动态路由出现404/500报错求助

DevOps 小满

2026-9-24

问题根源与修复方案

1. 动态路由接口逻辑错误（500、404错误原因）

你当前的/tents/:id路由使用了res.render()方法，这个方法是服务端渲染模板专用的API，你没有配置任何模板引擎，调用后会直接抛出服务端错误，找不到对应模板文件时也会返回404。你需要的逻辑是从本地的data.json中匹配对应ID的产品数据并返回JSON，修改逻辑如下：

从req.params中获取传入的id参数，注意该参数默认是字符串类型，需要和你的data.json中存储的id类型做匹配（如果json里id是数字需要做类型转换）
匹配到对应产品后返回数据，未匹配到返回404状态码

2. CodeSandbox网络错误原因

你的API使用了http协议，而CodeSandbox是https站点，浏览器的混合内容安全策略会阻止https站点主动发起http请求，所以会出现本地可访问、CodeSandbox报错的问题。你直接把请求地址的http改成https即可，Heroku默认支持https访问。

修复后的完整服务端代码

const express = require('express');
const cors = require('cors')
const app = express();

app.use(cors())

const importData = require("./data.json"); 

let port = process.env.PORT || 3000;

app.get('/', (req, res) => {
    res.send("Hello world")
})

app.get('/tents', (req, res)=> {
    res.send(importData);
})

app.get('/tents/:id', function(req , res){
  // 注意如果你的data.json里id是数字类型，将匹配逻辑改为item.id === Number(req.params.id)
  const targetTent = importData.find(item => item.id === req.params.id);
  if (targetTent) {
    res.send(targetTent);
  } else {
    res.status(404).send({message: "未找到对应产品"});
  }
});

app.listen(port, ()=> {
    console.log(`example app is listening on http://localhost:${port}`);
})