似乎被AxiosError代码ERR_NETWORK卡住

o2rvlv0m  于 2023-02-19  发布在  iOS
关注(0)|答案(1)|浏览(1210)

我是一个新的编码和坚持这个Axios错误有一段时间了,似乎没有什么可以修复它。
一切都很好,直到它不是,只能看到我的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
monwx1rj

monwx1rj1#

您很有可能遇到CORS(跨源资源共享)错误,这是您的浏览器所采取的安全措施。您可以阅读更多相关信息,但这里有一个关于这种情况下可能发生的情况的简要说明。
1.单击“提交”,请求将发送到服务器
1.服务器(后端)准备响应并将其发送回浏览器
1.您的浏览器会阻止前端应用程序看到响应。
您如何解决这个问题,您的后端服务器需要指定谁有资格获得和访问它发送的响应。所以您只需要在您的后端服务器中编写一些代码,所以请给予我们您的后端代码,看看我们能提供什么帮助。

相关问题