使用Express.js+Node.js时Fetch POST请求出现404 URL未找到问题

我在使用Node.js和Express开发时，遇到前端通过Fetch发送POST请求无法找到对应URL的问题，报错为404 URL Not Found。我已经尝试了多种请求URL格式，但问题依然存在。

前端代码 #

const form = document.querySelector('form');

form.addEventListener('submit', async (e) => {
  e.preventDefault();

    const data = new FormData(form);

    const response = await fetch('http://localhost:8080/app', {
      method: 'POST',
      body: JSON.stringify({
        prompt: data.get('input'),
      }),
      headers: {
        'Content-Type': 'application/json',
      },
    })

});

后端Express代码 #

import express from 'express';
import cors from 'cors';

const app = express();
app.use(cors());
app.use(express.json());

app.post('/app', async (req, res) => {
  try {
    
    const response = 'test'

    res.send({ response });
  } catch (error) {
    console.error(error)
  }
});
app.listen(8080)

已尝试的请求URL格式 #

'http://localhost:8080/app'

'/app'

'./app'

'app'

'localhost:8080/app'

'http://localhost:8080'

排查与解决步骤 #

• 确认后端服务正常启动
  在app.listen里加个回调函数，启动后看终端是否输出服务启动提示：

  app.listen(8080, () => {
    console.log('服务已启动在http://localhost:8080');
  });
  

  如果终端没这句话，说明服务没正常启动，检查启动命令和代码报错。

• 检查端口占用情况
  Mac/Linux用lsof -i :8080，Windows用netstat -ano | findstr ":8080"查看8080端口是否被其他程序占用，换个未被占用的端口试试。

• 直接验证后端路由
  用Postman或curl发送POST请求到http://localhost:8080/app，如果能收到{"response":"test"}，说明后端路由没问题，问题出在前端；如果还是404，检查后端路由定义是否正确。

• 前端请求路径与跨域检查

  • 若前端和后端同域，用相对路径'/app'更稳妥，避免全路径拼写错误。
  • 确认前端请求的端口是后端的8080，不是前端自身的服务端口（比如3000）。

• 查看浏览器Network日志
  打开开发者工具的Network标签，检查请求的方法、URL、请求头（尤其是Content-Type）和请求体是否正确，有没有隐藏的错误提示（比如CORS问题）。

• 确认中间件顺序
  确保app.use(express.json())放在路由定义之前，否则Express无法解析JSON请求体，虽然你的代码顺序正确，但后续修改时要注意这点。

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