문제 상황
react-dom.development.js:4005 Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development.
현재 프론트단에서 state들을 useEffect로 localStorage에 저장하고 불러오는 과정을 추가하는 작업을 하고 있었다.
이미 만들어둔 node 서버와 활발하게 api 경로에 요청을 넣어 데이터를 주고 받고 있는데 갑자기 cross-origin 어쩌고 하면서 에러가 뜨니 당황스러웠다.
이미 http-proxy-middleware와 express를 이용해서 CORS 설정을 해둔 상태였기에 CORS 관련된 문제는 아닌 것 같았다. 이것 저것 코드를 계속 수정해봤지만 에러가 해결되지 않자 정상적으로 작동하던 이전 커밋으로 복구해보기도 했다.(😇)
그럼에도 에러가 떠서 혹시나 하는 마음에 개발자툴 Application탭에서 localstorage에 저장된 값들을 삭제해봤다. 아니나 다를까... 다시 잘 동작한다.😂 왜 그런건지 궁금해서 localstorage cors라는 검색어로 구글링해봤지만 원하는 답을 못찾았다.
그래서 다시 이전에 하던 작업들을 빠르게 다시 해나가던 중 또!! 저 에러가 떴다. 이번에도 localstorage에서 삭제하면 작동은 될 것 같았지만 근본적인 해결책이 아닌 것 같았다. 그래서 에러메시지 그대로 구글링해보니 해당 답변을 찾을 수 있었다.😆
원인 분석
대부분이 내가 했던 방법대로 localstorage에서 삭제하라고 하지만, 일부 답변들이 근본적인 원인이 무엇인지 알려주었다.
(관련된 답변 일부 발췌)
Check your token object. that's maybe undefined in local storage
You are trying to cast this.state.zone into a string typed value when may be, it is null, empty or it's not well formatted
For example, if you have a token and you're trying to JSON.parse(yourToken) and your token isn't a string, or hasn't been stringified...you will get this error
바로 localStorage에 저장할 때 들어가는 데이터가 undefined, null이거나 stringified 되지 않은 요상한 형태이면 에러를 발생시킨다고 한다!
안그래도 만들고 있는 앱에서 로그인한 유저 데이터를 받아와 새로고침해도 날아가지 않도록 localStorage에 저장하고 있었는데, 상황에 따라 undefined이 들어갈 수 도 있었다.
개발툴을 열어 확인해보니 실제로 isLoggedIn이 undefined이어서 확실하게 확인하기 위해 멀쩡한 user를 먼저 지우고 새로고침해봤다. 역시나 에러가 그대로고 undefined인 isLoggedIn을 지우니 에러가 사라졌다!!🔥🚀
해결 방안
위처럼 문제가 되는 값을 개발툴에서 지워주면 되지만, 원인이 되는 코드를 고쳐주지 않으면 계속해서 문제 상황이 반복된다. 따라서 아래와 같이 코드를 수정해봤다.
- 이전 코드
상황에따라 null과 undefined가 들어갈 수 있었음
useEffect(() => {
window.localStorage.setItem("user", JSON.stringify(user));
}, [user]);
useEffect(() => {
window.localStorage.setItem("isLoggedIn", JSON.stringify(isLoggedIn));
}, [isLoggedIn]);- 수정된 코드
&& 오퍼레이터로 간단하게 null과 undefined일 땐 localStorage에 state값을 저장하지 않도록 했다.
useEffect(() => {
user && window.localStorage.setItem("user", JSON.stringify(user));
}, [user]);
useEffect(() => {
isLoggedIn && window.localStorage.setItem("isLoggedIn", JSON.stringify(isLoggedIn));
}, [isLoggedIn]);그 결과 오류없이 잘 작동한다:) 🥳
