Express.js连接MySQL时GET /dataFood出现404错误求助

1. 端口不匹配问题 #

你客户端请求的是127.0.0.1:5500/dataFood，但Express服务器默认启动端口为3000（除非手动修改）。如果你的Express服务运行在其他端口（比如3000），客户端应请求http://localhost:3000/dataFood，而非5500（该端口大概率是Live Server等工具打开HTML的端口）。

• 解决方式：要么修改客户端fetch地址为Express服务的端口，要么在服务端代码中设置app.listen(5500, ...)将Express服务端口改为5500。

2. Express路由未正确定义 #

检查服务端代码是否定义了/dataFood的GET路由，正确的路由示例如下：

app.get('/dataFood', async (req, res) => {
  try {
    // MySQL数据查询逻辑
    const results = await db.query('SELECT * FROM 你的食物表名');
    res.json(results);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

若未定义该路由，请求必然返回404。

3. 静态文件与服务端路由冲突 #

如果使用express.static托管静态文件，确保HTML页面通过Express服务访问（比如http://localhost:3000/index.html），而非直接用本地文件或其他工具打开。跨端口访问不仅会引发路由无法被Express处理的问题，还可能导致跨域错误。

• 解决方式：将HTML文件放入Express的静态目录（如public文件夹），通过Express服务访问页面，此时fetch('/dataFood')的相对路径会自动指向Express服务端口。

4. CORS配置（跨端口场景） #

若必须跨端口访问，需在Express中配置CORS中间件：

const cors = require('cors');
app.use(cors());

但更推荐让页面与API同端口访问，从根源避免CORS问题。

5. 服务端启动状态检查 #

查看服务端控制台是否有报错，确认服务已成功启动并监听指定端口，同时MySQL连接是否正常。若服务未启动，或MySQL连接失败导致路由未加载，也会出现404错误。

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