为什么会出现POST '后端端点'net::ERR_FAILED？

Question

第一个错误：POST http://62.113.97.194:8000/api/v1/users/token net::ERR_FAILED

  const loginUser = async (username, password) => {
    try {
      const response = await fetch(
        "backend endpoint",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            username: username,
            password: password,
          }),
        }
      );

      if (response.ok) {
        const data = await response.json();
        setAuthTokens(data);
        setUser(jwt(data.access));
        localStorage.setItem("authTokens", JSON.stringify(data));
        navigate("/");
      } else {
        const errorData = await response.json();
        console.error("Login failed:", errorData);
        alert(`Login failed: ${errorData.message}`);
      }
    } catch (error) {
      console.error("An unexpected error occurred during login:", error);
      alert(`An unexpected error occurred: ${error.message}`);
    }
  };

 const handleTokenRequest = async () => {
    try {
      if (!otp) {
        console.error(
          "Verification code is empty. Please provide a valid code."
        );
        return;
      }

      const response = await fetch(
        "backend endpoint",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            username: 1,
            password: 1,
            phone: formData.phoneNumber,
            verification_code: otp,
          }),
        }
      );

      if (response.ok) {
        const responseData = await response.json();
        const accessToken = responseData.access;
        const refreshToken = responseData.refresh;

        // Log tokens in the console
        console.log("Access Token:", accessToken);
        console.log("Refresh Token:", refreshToken);

        loginUser(accessToken, refreshToken);

        // Additional logic, such as redirecting the user or showing a success message
      } else {
        console.error("Token request failed. Something went wrong!");
      }
    } catch (error) {
      console.error("Error during token request:", error);

      if (error.response && error.response.status === 404) {
        console.error("Invalid verification code or user not found");
      }
    }
  };

第二个错误：

登录时发生意外错误：TypeError: 无法获取 在登录用户 (AuthContext.jsx:15:30) 在handleTokenRequest（index.jsx：159：9）

[[[]()]()]()

我尝试与不同组的其他开发人员核实，但不幸的是我没有收到我的问题的答案，我也尝试自己解决问题但我不能，我也尝试找出我的问题的答案来自AI，但没有帮助

Answer 1

以下是潜在问题：

1. 从图像来看，您的 API 端点似乎是正确的。
2. 您的 try catch 语句没有任何 throw 错误。我建议在尝试中添加这些内容。它可能会让您了解错误发生的原因。

 throw new Error("Error happened", error);

3. fetch() 仅在用户离线或发生一些不太可能的网络错误（例如 DNS 查找失败）时才会拒绝承诺。根据 MDN，

所以在获取之后你应该添加类似的东西

if (!response.ok) {
      throw new Error("Error happened");
    }