Blocked a frame with origin "https://example.com" from accessing a frame with origin "https://www.herokucdn.com". Protocols, domains, and ports

Question

I have looked many places for this specific problem, but most of the answers are relatively old and don't seem to deal specifically with my issue. I am building a react app using create-react-app. The backend uses Python/flask and both are hosted on Heroku. The app loads, authenticates and pretty much works fine. However, one issue is on refreshing. I am storing the user's logged status in the root App.js in a piece of state. As a result, when the user refreshes the page, this state reverts to the default "NOT_LOGGED_IN" status. As such, I've written a useEffect hook function that checks if the user is holding a JWT which I'm using for authentication. When running locally, there are no issues with refreshing the page, but once both the front end is deployed, and the page is refreshed from anywhere within the app, I get:

Blocked a frame with origin "https://mycoolapp.com" from accessing a frame with origin "https://www.herokucdn.com". Protocols, domains, and ports must match.

I'm running flask-cors with CORS = cors(app), so I don't think this is a cors issue. After researching, I see that this is due to "mycoolapp.com" and "www.herokucdn.com" differing in the "www" part of the domain. Yet I don't know how to fix this. Perhaps there is another workaround that someone know of?

Here is the useEffect refresh hook I have in the root app:

useEffect(() => {
  const loadingOnRefresh = async () => {
    if (user.logged_status === 'NOT_LOGGED_IN' && window.localStorage.getItem('token')) {
      const decodedToken = jwtDecode(window.localStorage.getItem('token'))
        let config = {
        headers: {
          "Content-Type": "application/json",
          'Access-Control-Allow-Origin': '*'
          }
      }
      await axios.get(`api call to authenticate`, config)
      .then(response => {
        setUser({
          logged_status: 'LOGGED_IN',
          ...response.data
      })},
      )
      .catch(error => {
        console.log('error in useEffect() in root App', error)
      })
    } 
    setLoading(false)
  } 
  loadingOnRefresh();
}, [user, user.logged_status])

I don't know if this is the best approach towards handling a refresh or not; alternative suggestions are more than welcome.