React使用fetch发起POST请求返回404，Postman测试正常如何解决？

1 基础运行状态检查 #

• 首先确认后端服务正常运行在http://localhost:5000，用Postman重新调用POST /login接口，确认接口本身可正常响应，排除后端服务关闭、端口修改、接口路由调整的问题
• 确认React开发服务器是在package.json配置完proxy字段后启动的：只要修改过package.json的配置项，必须重启npm start启动的开发服务，配置才会生效，这是最常见的proxy失效原因

2 代理生效验证 #

打开浏览器开发者工具的「网络」面板，触发请求后查看请求的实际目标地址：

• 如果请求地址是http://localhost:3000/login，说明代理未生效，可删除node_modules/.cache目录后重启React开发服务重试
• 如果请求已经被代理到http://localhost:5000/login仍然404，说明后端接口路由和请求路径不匹配，检查后端路由拼写

3 代码问题修正 #

你当前的请求逻辑存在两处可优化点，虽然不直接导致404，但会引发后续报错：

1. 状态判断用了按位或|，应该替换为逻辑或||
2. 未判断请求是否成功就直接调用json()方法，404状态下接口返回的不是JSON格式，会抛出解析错误
   修正后的代码如下：

import React, { useState } from "react";

const Login = () => {
  const [userLogin, setUserLogin] = useState({
    email: "",
    number: "",
  });

  const handleInputs = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    setUserLogin({ ...userLogin, [name]: value });
  };

  const postData = async (e) => {
    e.preventDefault();
    const { email, number } = userLogin;
    try {
      const loginRes = await fetch("/login", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ email, number }),
      });
      // 先校验请求状态
      if (!loginRes.ok) {
        throw new Error(`请求错误，状态码：${loginRes.status}`);
      }
      const data = await loginRes.json();
      if (data.status === 422 || !data) {
        window.alert("invalid data");
        console.log("invalid data ");
      } else {
        window.alert("Data save success!");
        console.log("Data save success!");
      }
    } catch (err) {
      console.error("请求异常：", err);
    }
  };

  return (
    <>
      <form method="POST">
        <div>
          <label htmlFor="email">Email</label>
          <input
            type="text"
            name="email"
            id="email"
            value={userLogin.email}
            onChange={handleInputs}
          />
        </div>

        <div>
          <label htmlFor="number">Mobile</label>
          <input
            type="number"
            name="number"
            id="number"
            value={userLogin.number}
            onChange={handleInputs}
          />
        </div>

        <div>
          <input
            type="submit"
            value="register"
            name="signup"
            id="signup"
            onClick={postData}
          />
        </div>
      </form>
    </>
  );
};

export default Login;

临时验证方案 #

如果代理始终无法生效，可暂时将fetch的请求地址替换为完整路径http://localhost:5000/login，同时在后端配置CORS允许http://localhost:3000的跨域请求，先确认接口调用逻辑正常，再单独排查proxy配置问题。

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