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

Question

Every time I submit a zone, it displays this error:

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

It only occurs when I press on the submit zone button which I guess is happening when the old states are being changed to the new one. (this.setState)

CreateZone.js

import React, { Component } from "react";  export default class CreateZone extends Component {   constructor(props) {     super(props);     this.state = {       zone: {         name: "",         zipCode: "",       },     };   }    updateZone(event) {     let updated = Object.assign({}, this.state.zone);     updated[event.target.id] = event.target.value;     this.setState({       zone: updated,     });   }    submitZone(event) {     console.log("SubmitZone: " + JSON.stringify(this.state.zone));     this.props.onCreate(this.state.zone);   }    render() {     return (       <div>         <input           onChange={this.updateZone.bind(this)}           className="form-control"           id="name"           type="text"           placeholder="Name"         />{" "}         <br />         <input           onChange={this.updateZone.bind(this)}           className="form-control"           id="zipCode"           type="text"           placeholder="Zip Code"         />{" "}         <br />         <input           onClick={this.submitZone.bind(this)}           className="btn btn-danger"           type="submit"           value="Submit Zone"         />       </div>     );   } } 

Zones.js

import React, { Component } from "react"; import superagent from "superagent"; import { CreateZone, Zone } from "../presentation";  export default class Zones extends Component {   constructor(props) {     super(props);     this.state = {       list: [],     };   }    componentDidMount() {     console.log("componentDidMount");     superagent       .get("/api/zone")       .query(null)       .set("Accept", "application/json")       .end((err, response) => {         if (err) {           alert("ERROR: " + err);           return;         }         console.log(JSON.stringify(response.body));         let results = response.body.results;         this.setState({           list: results,         });       });   }    addZone(zone) {     let updatedZone = Object.assign({}, zone);     updatedZone["zipCodes"] = updatedZone.zipCode.split(",");     console.log("ADD ZONE: " + JSON.stringify(updatedZone));      superagent       .post("/api/zone")       .send(updatedZone)       .set("Accept", "application/json")       .end((err, response) => {         if (err) {           alert("ERROR: " + err.message);           return;         }         console.log("ZONE CREATED: " + JSON.stringify(response));         let updatedList = Object.assign([], this.state.list);         updatedList.push(response.result);         this.setState({           list: updatedList,         });       });   }    render() {     const listItems = this.state.list.map((zone, i) => {       return (         <li key={i}>           {" "}           <Zone currentZone={zone} />{" "}         </li>       );     });      return (       <div>         <ol>{listItems}</ol>         <CreateZone onCreate={this.addZone.bind(this)} />       </div>     );   } } 

Zone.js

import React, { Component } from "react";  import styles from "./styles";  export default class Zone extends Component {   render() {     const zoneStyle = styles.zone;      return (       <div style={zoneStyle.container}>         <h2 style={zoneStyle.header}>           <a style={zoneStyle.title} href="#">             {" "}             {this.props.currentZone.name}{" "}           </a>         </h2>         <span className="detail"> {this.props.currentZone.zipCodes} </span>{" "}         <br />         <span className="detail">           {" "}           {this.props.currentZone.numComments} comments{" "}         </span>       </div>     );   } } 

Answer 1

Frequently I too get this error, to solve this error 1. Open Dev tools 2. Go to Application section 3. Clear the local storage by right clicking it.

Hope your error is resolved

Answer 2

I was getting this error while I was using JSON.parse() on the value of a cookie I had set.

(Edit: seems to be only in Chrome, FF throws parsing error, see comments)

React throws a cross-origin error whenever JSON.parse() receives an invalid string. Check the validity of the JSON value you are storing, since JSON structures are strict about their format.