POST请求后端接口出现net::ERR_FAILED及Failed to fetch错误求助

调用POST请求访问后端接口 http://62.113.97.194:8000/api/v1/users/token 时，出现 net::ERR_FAILED 错误，同时触发 TypeError: Failed to fetch 异常，错误栈指向 loginUser 函数（AuthContext.jsx:15:30）及 handleTokenRequest 函数（index.jsx:159:9）。

相关代码如下：

loginUser 函数 #

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}`);
    }
  };

handleTokenRequest 函数 #

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");
      }
    }
  };

已尝试向其他开发者求助、自行排查及借助AI工具，均未解决问题，恳请协助排查。

• 修正接口地址
  代码中写的是 "backend endpoint"，需替换为实际目标接口 http://62.113.97.194:8000/api/v1/users/token，硬编码错误会直接导致请求失败。

• 验证跨域（CORS）配置
  net::ERR_FAILED 最常见原因是跨域限制，需确认后端配置：

  • 检查浏览器网络面板的响应头，是否存在 Access-Control-Allow-Origin，值需包含前端域名或设为 *（仅开发环境建议）；
  • 确认后端允许 POST 方法及 Content-Type: application/json 请求头；
  • 若缺少CORS相关响应头，需后端调整跨域规则。

• 测试接口连通性
  用Postman或curl直接调用接口，验证服务本身是否正常：

  curl -X POST http://62.113.97.194:8000/api/v1/users/token \
  -H "Content-Type: application/json" \
  -d '{"username":"test","password":"test"}'
  

  若直接调用失败，说明后端服务未启动、端口未开放或路径错误；若直接调用成功，对比前端请求的参数、头信息是否与测试请求一致。

• 检查请求参数格式

  • handleTokenRequest 中硬编码的 username: 1 和 password: 1，需确认后端是否接受数字类型，若要求字符串需改为 "1"；
  • 验证 formData.phoneNumber 格式是否符合后端要求（如是否带区号、是否为纯数字）；
  • 确认 verification_code 的长度、类型是否与后端预期匹配。

• 补充错误排查信息
  在fetch的catch块中添加更详细的错误输出，便于定位问题：

  catch (error) {
    console.error("Error details:", {
      message: error.message,
      name: error.name,
      stack: error.stack
    });
    if (error.name === 'TypeError' && error.message.includes('CORS')) {
      alert("跨域请求被阻止，请检查后端CORS配置");
    }
  }
  

• 排除浏览器环境限制

  • 关闭代理、VPN后重试，避免网络路由问题；
  • 临时禁用浏览器的广告拦截、隐私类扩展，排除请求被拦截的可能；
  • 切换至其他浏览器测试，排除浏览器特定配置干扰。

内容的提问来源于stack exchange，提问作者timur.frontend