向本地服务器发送POST请求时遭遇404错误求助

尝试向本地服务器发送POST请求时返回404错误，确认服务器已运行但无法正常工作。相关代码如下：

前端（Vite + React）代码： #

async function submitBtn () {
    var data={
      password:Password,
      login:Login
    }
    alert('Login: ' + Login + ' Password: ' + Password)
    const jsonData = JSON.stringify(data);
    const body = JSON.stringify({
      jsonData
    })
    const config = {
      "headers":{
        "Content-Type":"application/json"
      }
    }
    try{
      const response = await axios.post('http://localhost:5173/api/data', body, config)
      console.log(response)
    } catch(error){
      console.log(error)
    }
  }

后端（ExpressJS）代码： #

const express = require("express");
const app = express();
const port = 5173;
app.use(express.json()); // Enable JSON parsing

app.post('/api/data', (req, res) => {
  console.log(req.body); // Log the received data
  res.status(200).json({ message: 'Data received successfully' });
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

解决方案 #

1. 解决端口冲突（404核心原因） #

Vite开发服务器默认端口是5173，你的Express后端也使用了相同端口，导致前端请求实际发送到了Vite服务器而非Express服务器，因此返回404。

修复步骤：

• 修改后端端口为其他值（比如3000）：

  const port = 3000;
  

• 重启Express服务器，确认它运行在http://localhost:3000。

2. 修正前端请求地址与数据格式 #

前端代码存在两次JSON序列化的冗余操作，且请求地址指向了错误的端口：

修复后的前端代码：

async function submitBtn () {
  const data = {
    password: Password,
    login: Login
  };
  alert(`Login: ${Login} Password: ${Password}`);
  try {
    // 修改请求地址为后端实际端口
    const response = await axios.post('http://localhost:3000/api/data', data);
    console.log(response);
  } catch(error) {
    console.log(error);
  }
}

说明：axios会自动将传入的对象序列化为JSON，并设置正确的Content-Type: application/json请求头，无需手动执行JSON.stringify或单独配置headers。

3. 处理跨域问题（必加） #

前端运行在5173端口，后端在3000端口，属于跨域请求，需要在Express中添加CORS支持：

步骤：

1. 安装cors中间件：

   npm install cors
   

2. 修改后端代码引入并使用cors：

   const express = require("express");
   const cors = require("cors");
   const app = express();
   const port = 3000;
   
   app.use(cors()); // 允许所有跨域请求
   app.use(express.json());
   
   app.post('/api/data', (req, res) => {
     console.log(req.body);
     res.status(200).json({ message: 'Data received successfully' });
   });
   
   app.listen(port, () => {
     console.log(`Server is running on port ${port}`);
   });
   

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