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