React登录组件请求报错：net::ERR_CONNECTION_REFUSED及TypeError求助

你遇到的net::ERR_CONNECTION_REFUSED和TypeError: Failed to fetch错误，核心是前端无法连接到http://localhost:5000的后端服务，按以下步骤逐一排查：

1. 确认后端服务是否正常运行 #

• 检查本地5000端口的后端服务是否启动：比如你的Node.js后端有没有执行启动命令（如npm start/node server.js）
• 直接在浏览器地址栏访问http://localhost:5000/api/auth/login，如果显示"无法访问此网站"，说明后端服务未启动，先启动后端再测试

2. 验证API地址与路由一致性 #

• 核对后端的登录路由是否为/api/auth/login：检查后端代码里的路由配置，有没有拼写错误（比如大小写、路径层级错误）
• 确认后端服务的端口确实是5000：如果后端配置了其他端口（如3001），需要同步修改前端fetch的地址

3. 跨域问题处理（服务启动后仍报错时） #

如果后端服务正常运行，但仍出现类似错误，可能是跨域限制：

• 后端配置CORS：比如在Node.js项目中安装cors包并启用，允许前端域名的请求
• 前端配置开发代理：在React项目的package.json中添加"proxy": "http://localhost:5000"，之后fetch可以简化为fetch('/api/auth/login')，避免跨域问题

4. 代码错误处理优化 #

当前代码未处理网络异常，建议添加try/catch捕获错误，提升用户体验：

const handleSubmit = async (e)=>{
    e.preventDefault(); 
    try {
        // API调用
        const response = await fetch(`http://localhost:5000/api/auth/login`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({email: credentials.email, password: credentials.password})
        });
        
        // 处理HTTP错误状态码
        if (!response.ok) {
            throw new Error(`请求失败，状态码：${response.status}`);
        }
        
        const json = await response.json();
        console.log(json);
        
        if(json.success){
            localStorage.setItem('token',json.authtoken);
            navigate("/", { replace: true }); 
        }
        else{
            alert("无效的登录凭证")
        }
    } catch (error) {
        console.error('登录请求失败:', error);
        alert('无法连接到服务器，请检查后端服务是否正常运行');
    }
}

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