Axios PUT请求返回404错误：跨localhost端口请求失效问题求助

嘿，我一眼就揪出了导致404的核心问题，再给你补充几个额外的排查点，确保后续运行顺畅：

1. 请求方法不匹配（直接导致404的原因） #

你在服务器server.js里定义的是POST接口：

app.post("/send-axie", (req, res) => {
  console.log("in send-axie");
});

但前端app.js里用的是PUT请求：

axios.put("http://localhost:3000/send-axie", { axieID })

HTTP方法不匹配，服务器找不到对应路由，自然返回404。

解决方法：二选一保持一致即可

• 把前端的put改成post：

  axios
    .post("http://localhost:3000/send-axie", { axieID })
    .then((response) => {
      console.log(response);
    })
    .catch((err) => {
      console.log("in catch");
      console.log(err);
    });
  

• 或者把服务器的post改成put：

  app.put("/send-axie", (req, res) => {
    console.log("in send-axie");
  });
  

2. 额外优化/排查点 #

（1）解析请求体 #

你的服务器目前没有解析JSON格式的请求体，即便请求成功，后续想获取req.body.axieID也会得到undefined。在server.js里添加解析中间件：

const app = express();
// 新增这一行，解析JSON请求体
app.use(express.json());
app.use(cors());
app.use(express.static(publicPath));

（2）确认服务器端口 #

检查服务器启动日志，确认它确实运行在3000端口（日志会显示Server is up on 3000）。如果是通过环境变量PORT启动的，确保该变量没有被设置为其他值。

（3）CORS配置优化 #

你已经启用了cors()，这在开发环境没问题，但如果后续遇到跨域报错，可以更精准地指定允许的origin：

app.use(cors({ origin: "http://localhost:8080" }));

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