Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development

Question

Everytime I submit a zone, It display this error \'Uncaught Error: A cross-origin error was thrown. React doesn\'t have access to the actual error object in development\' It

Answer 1

This is not a CORS problem. Generally, there is an issue in calling the function. check this line

this.props.onCreate(this.state.zone)

Answer 2

Literally the first thing mentioned on https://reactjs.org/docs/cross-origin-errors.html, but in case anyone else came here first:

<script crossorigin src="..."></script>

Needed if you're serving your bundles from a different domain than your page. Eg. I was hitting localhost:8040 in the browser and serving the bundles from the webpack dev server at localhost:3000

Answer 3

If it helps anyone, I had a similar issue trying to call a callback function with part of my state as the argument. My resolution was calling it after a promise for Component Did Mount. Might help someone, even though this isn't an exact solution for your code:

componentDidMount() {
    const { clientId } = this.props
    axios.get(`/api/getpayments/${clientId}`)
        .then(response => {
            this.setState({ payments: response.data })
        })
        .then(() => {
            this.props.updateProgressBar(this.state.payments.slice())
        })
}

Answer 4

This is shown because React does not show the traceback of the error due to security concerns. The error could be unrelated to CORS altogether. I suggest to look at the console for errors that would show up. Resolving those errors may solve your issue.

Answer 5

check your local store. I think an undefined value is there which is why this error occurred

Answer 6

I was getting the same error again and again because my context store was trying to access something from the localStorage which was undefined. In case anyone stumbled upon this error using the context API, clearing localStorage might help as said in many answers above! :)