Uncaught Error: A cross-origin error was thrown in React

Question

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.

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.

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.

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)
    }
  }

Answer 1

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. It's a pain, but necessary.

The problem is that you are trying to load a resource from another origin; for example:

1. You are on www.myawesomesite.com
2. You try and load something from www.anothersite.com

^^^ You are "crossing origins" here. Sorry Bro, can't do that.

Typically to get around this you must:

1. Allow cross-origin requests on the server-side by enabling CORS. Depending on your web server, there there is some setting allow cross-origin requests.
2. Move the data onto the same origin. In the above example, put everything on www.myawesomesite.com

Also beware that more recent versions of Chrome will view requests to localhost as cross-origin, and block them.

Answer 2

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.