[英]Uncaught Error: A cross-origin error was thrown in React
I am trying to implement a login functionality by following https://www.freecodecamp.org/news/how-to-persist-a-logged-in-user-in-react/ blog.我正在尝试通过关注https://www.freecodecamp.org/news/how-to-persist-a-logged-in-user-in-react/博客来实现登录功能。
I want to persist the user token in local storage.我想将用户令牌保存在本地存储中。
Everything is working fine, but every time I refresh the page, it throws me an error:一切正常,但每次我刷新页面时,它都会抛出一个错误:
Uncaught Error: A cross-origin error was thrown.
未捕获的错误:引发了跨源错误。 React doesn't have access to the actual error object in development.
React 无法访问开发中的实际错误 object。
I have read to fix it clear the site data here Uncaught Error: A cross-origin error was thrown.我已阅读以修复它并在此处清除站点数据未捕获的错误:引发了跨域错误。 React doesn't have access to the actual error object in development .
React doesn't have access to the actual error object in development 。
But, I want to have a proper solution or any alternate method to bypass it.但是,我想有一个适当的解决方案或任何替代方法来绕过它。
So, that even on the local machine, I can use the login functionality.所以,即使在本地机器上,我也可以使用登录功能。
Here is what I have tried so far:到目前为止,这是我尝试过的:
For checking if the current user is signed in or not:检查当前用户是否登录:
const [userState, setUserState] = useState()
useEffect(() => {
const loggedInUser = localStorage.getItem("user");
if (loggedInUser) {
const foundUser = JSON.parse(loggedInUser);
console.log(foundUser);
setUserState(foundUser);
}
}, []);
For login:登录:
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const handleSubmit = async e => {
e.preventDefault();
const user = { username, password };
const response = await axios.post(
"http://localhost:8000/api-token-auth/",
user
)
props.setUserState(response.data)
const loggedInUser = localStorage.getItem("user");
if (!loggedInUser) {
localStorage.setItem('user', response.data)
}
}
This is a very common problem.这是一个很常见的问题。 It is a security feature to prevent sites from stealing sensitive data from you.
这是一项安全功能,可防止网站从您那里窃取敏感数据。 Imagine you loading www.learningjavascript.com , and a malicious attempt is made to myEvilHacker.com without your knowledge, and sending your banking information from when you paid your bills on www.chase.com .
想象一下,您正在加载www.learningjavascript.com ,并且在您不知情的情况下对 myEvilHacker.com 进行了恶意尝试,并在您在www.chase.com 上支付账单时发送了您的银行信息。 It's a pain, but necessary.
这很痛苦,但很有必要。
The problem is that you are trying to load a resource from another origin;问题是您正在尝试从另一个来源加载资源; for example:
例如:
^^^ You are "crossing origins" here. ^^^ 你在这里“穿越起源”。 Sorry Bro, can't do that.
对不起,兄弟,不能那样做。
Typically to get around this you must:通常要解决这个问题,您必须:
Also beware that more recent versions of Chrome will view requests to localhost
as cross-origin, and block them.还要注意,较新版本的 Chrome 会将对
localhost
请求视为跨域请求,并阻止它们。
I had this error message on this snippet from my code:我的代码中的这个片段有这个错误信息:
prevItem.products = JSON.parse(orders[index].orderItems).
But my variable was ALREADY json. After I removed the parse method, everything was fine.但我的变量已经是 json。在我删除解析方法后,一切都很好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.