React中使用Axios发起GET请求时出现网络错误

一、组件代码的致命问题 #

你的GetData组件存在严重逻辑错误：在return中直接调用getData()异步函数，这会导致组件无限重渲染——每次渲染都会触发请求，浏览器会因重复请求或渲染异常阻断连接，最终抛出ERR_FAILED。

修复方式 #

组件的return必须返回合法JSX，而非调用异步函数。如果是要封装数据获取逻辑，建议改成自定义Hook：

/* eslint-disable no-unused-vars */
import { useState, useEffect } from 'react';
import api from '../axios';

export const useGetDevices = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    const getData = async () => {
      try {
        const response = await api.get('/devices', { signal });
        setData(response.data);
      } catch (err) {
        if (!api.isCancel(err)) {
          setError(err);
          console.error('请求错误详情:', err);
        }
      } finally {
        setLoading(false);
      }
    };

    getData();
    return () => controller.abort(); // 组件卸载时取消请求，避免内存泄漏
  }, []);
 
  return { data, loading, error };
}

在业务组件中使用该Hook：

import { useGetDevices } from './path-to-useGetDevices';

const DeviceList = () => {
  const { data: devices, loading, error } = useGetDevices();

  if (loading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error.message}</div>;

  return (
    <ul>
      {devices.map(device => (
        <li key={device.id}>{device.name}</li>
      ))}
    </ul>
  );
}

二、Axios配置的错误点 #

1. 错误设置CORS响应头
   Access-Control-Allow-Origin和Access-Control-Allow-Methods是服务器端返回的响应头，前端请求头中设置这些字段完全无效，还可能干扰请求逻辑，直接删除：

const api = axios.create({
    baseURL: "http://localhost:5198/api",
    withCredentials: false
    // 删掉下面的无效headers配置
    // headers: {
    //   'Access-Control-Allow-Origin' : '*',
    //   'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS',   
    // }
})

2. Token验证排查
   如果后端要求Bearer Token，检查localStorage.getItem('token')是否能拿到有效值——如果Token为空、格式错误或已过期，后端可能返回200状态码但实际响应是错误页面（而非合法JSON），Axios因解析失败触发错误。可以在拦截器中打印Token，或在catch中输出完整响应信息：

catch (error) {
  console.error('响应状态:', error.response?.status);
  console.error('响应内容:', error.response?.data); // 查看后端实际返回的内容
}

三、服务器与网络层面排查 #

1. 检查响应格式
   打开浏览器F12「网络」面板，找到该请求查看「响应」标签：如果返回的是HTML页面（比如错误页、登录跳转页）而非JSON，Axios会解析失败，即使状态码是200也会抛出错误。

2. 验证服务器CORS配置
   确认后端服务的CORS配置是否正确：

• 确保Access-Control-Allow-Origin设置为前端域名（如http://localhost:3000）或*
• 如果请求带Authorization头，服务器需配置Access-Control-Allow-Headers: Authorization

3. 服务状态与网络拦截

• 直接在浏览器地址栏访问http://localhost:5198/api/devices，确认后端服务正常运行、能返回数据
• 关闭广告拦截、隐私类浏览器扩展，或在无痕模式下测试，排除扩展对请求的阻断

4. 端口与防火墙
   确认localhost:5198未被系统防火墙、杀毒软件拦截，后端服务确实在该端口监听。

内容的提问来源于stack exchange，提问作者Daniel Féliz S.