React项目AxiosError: ERR_NETWORK网络错误排查求助

问题描述 #

我是编程新手，遭遇AxiosError（错误码ERR_NETWORK）已有一段时间，尝试多种方法均无法解决。原本项目运行正常，现在仅能访问React应用首页和后端8000端口，其他页面均空白，反复检查代码未发现问题。

错误信息 #

AxiosError
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:52058:14)"
[[Prototype]]: Error

相关代码（AuthModal.js） #

import { useState } from "react"
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
import {useCookies} from 'react-cookie'


const AuthModal = ({setShowModal, isSignUp}) => {
    const [email, setEmail] = useState(null)
    const [password, setPassword] = useState(null)
    const [confirmPassword, setConfirmPassword] = useState(null)
    const [error, setError] = useState(null)
    const [cookies, setCookie, removeCookie] = useCookies(['user'])

    let navigate = useNavigate()

    console.log(email, password, confirmPassword)

    const handleClick = () => {
        setShowModal(false)
    }

    const handleSubmit = async (e) => {
        e.preventDefault()

        try {
            if (isSignUp && (password !== confirmPassword)) {
                setError('Passwords need to match!')
                return
            }

            const response = await axios.post(`http://localhost:8000/${isSignUp ? 'signup' : 'login'}`, { email, password })

            setCookie('AuthToken', response.data.token)
            setCookie('UserId', response.data.userId)

            const success = response.status === 201
            if (success && isSignUp) navigate ('/onboarding')
            if (success && !isSignUp) navigate ('/dashboard')

            window.location.reload()

        } catch (error) {
            console.log(error)
        }

    }

    return (
      <div className="auth-modal">
        <div className="close-icon" onClick={handleClick}>ⓧ</div>
        
        <h2>{isSignUp ? 'CREATE ACCOUNT' : 'LOG IN'}</h2>
        <p>By clicking Log In, you agree to our terms. Learn how we process your data in our Privacy Policy and Cookie Policy. </p>
        <form onSubmit={handleSubmit}>
            <input 
                type='email'
                id='email'
                name='email'
                placeholder="Email"
                required={true}
                onChange={(e) => setEmail(e.target.value)}
                />
            <input 
                type='password'
                id='password'
                name='password'
                placeholder="Password"
                required={true}
                onChange={(e) => setPassword(e.target.value)}
            />
            {isSignUp && <input 
                type='password'
                id='password-check'
                name='password-check'
                placeholder="Confirm password"
                required={true}
                onChange={(e) => setConfirmPassword(e.target.value)}
            />}
            <input className="secondary-button" type='submit'/>
                <p>{error}</p>
            </form>
            <hr/>
            <h2>GET THE APP</h2>
      </div>
    )
  }
  
  export default AuthModal

排查与解决步骤 #

• 检查跨域配置：React运行在3000端口，后端在8000端口，属于跨域请求。

  1. 后端需配置CORS，允许来自http://localhost:3000的请求（具体配置根据后端框架而定，比如Express用cors中间件）。
  2. 或者在React项目的package.json中添加代理配置："proxy": "http://localhost:8000"，之后Axios请求可简化为axios.post(/${isSignUp ? 'signup' : 'login'}, { email, password })。

• 验证后端服务可用性：直接用浏览器或Postman访问http://localhost:8000/signup和http://localhost:8000/login（POST方法，携带测试用的email和password），确认后端能正常响应，没有端口占用、服务未启动的情况。

• 检查请求地址正确性：确认后端路由是否与请求路径完全匹配，比如后端是否真的存在/signup和/login的POST接口，路径拼写无错误。

• 排除浏览器限制：尝试用浏览器隐身模式打开应用，排除广告拦截插件、浏览器安全设置对请求的拦截。

• 代码细节优化：

  1. 捕获错误时，可将错误信息显示到页面，方便排查：setError(error.message || '请求失败')。
  2. window.location.reload()放在navigate之后可能导致页面跳转被打断，可考虑移除或调整执行顺序。

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