使用Axios请求后端接口出现ERR_NETWORK错误，无法连接数据库求助

用户代码 #

import axios from 'axios';

const [errorList, setErrorList] = useState([]); 
const [isloading, setIsloading] = useState(false); 
const [error, setError] = useState("");

let navigate = useNavigate();

const [user, setUser] = useState({
    name: '',
    lastName: '',
    age: 0,
    email: '',
    phone: '',
    password: ''
});

async function submitRegisterForm(e) { 

    e.preventDefault(); 

    setIsloading(true); 

    let validationResult = validateRegisterForm();

    if (validationResult.error) {
        setErrorList(validationResult.error.details); 
        setIsloading(false); 
    } else {
        let {data}= await axios.post('http://localhost:5000/user/signup', user );

        if (data.message === 'success') {
            setIsloading(false); 
            navigate('/login') 
        } else {
            setError(data.message); 
            setIsloading(false); 
        }
    }
}

出现的错误 #

AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
code: "ERR_NETWORK"
config: {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
message: "Network Error"
name: "AxiosError"
request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
stack: "AxiosError: Network Error\n at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:54571:14)"
[[Prototype]]: Error

排查方案 #

• 确认后端服务状态
  直接在浏览器地址栏访问http://localhost:5000/user/signup，或用Postman发送POST请求测试。如果无响应，说明后端未启动、端口配置错误或服务崩溃。

• 解决跨域问题
  React默认运行在3000端口，后端在5000端口属于跨域请求，需做以下处理：

  • 后端配置CORS：以Express为例，安装cors包并启用

    const cors = require('cors');
    app.use(cors());
    

  • 或在React项目的package.json中添加代理：

    "proxy": "http://localhost:5000"
    

    之后Axios请求改为axios.post('/user/signup', user)，无需写完整域名。

• 查看浏览器网络请求详情
  打开浏览器开发者工具（F12）→ Network标签，重新提交表单：

  • 检查请求URL是否正确，有无拼写错误
  • 查看请求状态码（如404、500）和响应内容，定位具体问题

• 检查Axios请求配置
  确保请求头正确，可手动指定Content-Type：

  await axios.post('http://localhost:5000/user/signup', user, {
    headers: {
      'Content-Type': 'application/json'
    }
  });
  

  同时关闭代理、VPN等可能干扰网络的工具，重试请求。

• 添加错误捕获逻辑
  当前代码未处理Axios的网络异常，需用try/catch包裹异步请求，避免未捕获错误：

  async function submitRegisterForm(e) { 
    e.preventDefault(); 
    setIsloading(true); 
    try {
      const validationResult = validateRegisterForm();
      if (validationResult.error) {
        setErrorList(validationResult.error.details); 
      } else {
        const { data } = await axios.post('http://localhost:5000/user/signup', user );
        if (data.message === 'success') {
          navigate('/login');
        } else {
          setError(data.message); 
        }
      }
    } catch (err) {
      setError('网络请求失败，请检查后端服务或网络连接');
      console.error('请求错误:', err);
    } finally {
      setIsloading(false); 
    }
  }
  

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