title: Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development
body: <p>Every time I submit a zone, it displays this error:</p>
  <blockquote>
  <p>'Uncaught Error: A cross-origin error was thrown. React doesn't have
  access to the actual error object in development'</p>
  </blockquote>
  <p>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. <code>(this.setState)</code></p>
  <p><strong>CreateZone.js</strong></p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  
  export default class CreateZone extends Component {
    constructor(props) {
      super(props);
      this.state = {
        zone: {
          name: &quot;&quot;,
          zipCode: &quot;&quot;,
        },
      };
    }
  
    updateZone(event) {
      let updated = Object.assign({}, this.state.zone);
      updated[event.target.id] = event.target.value;
      this.setState({
        zone: updated,
      });
    }
  
    submitZone(event) {
      console.log(&quot;SubmitZone: &quot; + JSON.stringify(this.state.zone));
      this.props.onCreate(this.state.zone);
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;input
            onChange={this.updateZone.bind(this)}
            className=&quot;form-control&quot;
            id=&quot;name&quot;
            type=&quot;text&quot;
            placeholder=&quot;Name&quot;
          /&gt;{&quot; &quot;}
          &lt;br /&gt;
          &lt;input
            onChange={this.updateZone.bind(this)}
            className=&quot;form-control&quot;
            id=&quot;zipCode&quot;
            type=&quot;text&quot;
            placeholder=&quot;Zip Code&quot;
          /&gt;{&quot; &quot;}
          &lt;br /&gt;
          &lt;input
            onClick={this.submitZone.bind(this)}
            className=&quot;btn btn-danger&quot;
            type=&quot;submit&quot;
            value=&quot;Submit Zone&quot;
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <p><strong>Zones.js</strong></p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import superagent from &quot;superagent&quot;;
  import { CreateZone, Zone } from &quot;../presentation&quot;;
  
  export default class Zones extends Component {
    constructor(props) {
      super(props);
      this.state = {
        list: [],
      };
    }
  
    componentDidMount() {
      console.log(&quot;componentDidMount&quot;);
      superagent
        .get(&quot;/api/zone&quot;)
        .query(null)
        .set(&quot;Accept&quot;, &quot;application/json&quot;)
        .end((err, response) =&gt; {
          if (err) {
            alert(&quot;ERROR: &quot; + 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[&quot;zipCodes&quot;] = updatedZone.zipCode.split(&quot;,&quot;);
      console.log(&quot;ADD ZONE: &quot; + JSON.stringify(updatedZone));
  
      superagent
        .post(&quot;/api/zone&quot;)
        .send(updatedZone)
        .set(&quot;Accept&quot;, &quot;application/json&quot;)
        .end((err, response) =&gt; {
          if (err) {
            alert(&quot;ERROR: &quot; + err.message);
            return;
          }
          console.log(&quot;ZONE CREATED: &quot; + 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) =&gt; {
        return (
          &lt;li key={i}&gt;
            {&quot; &quot;}
            &lt;Zone currentZone={zone} /&gt;{&quot; &quot;}
          &lt;/li&gt;
        );
      });
  
      return (
        &lt;div&gt;
          &lt;ol&gt;{listItems}&lt;/ol&gt;
          &lt;CreateZone onCreate={this.addZone.bind(this)} /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <p><strong>Zone.js</strong></p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  
  import styles from &quot;./styles&quot;;
  
  export default class Zone extends Component {
    render() {
      const zoneStyle = styles.zone;
  
      return (
        &lt;div style={zoneStyle.container}&gt;
          &lt;h2 style={zoneStyle.header}&gt;
            &lt;a style={zoneStyle.title} href=&quot;#&quot;&gt;
              {&quot; &quot;}
              {this.props.currentZone.name}{&quot; &quot;}
            &lt;/a&gt;
          &lt;/h2&gt;
          &lt;span className=&quot;detail&quot;&gt; {this.props.currentZone.zipCodes} &lt;/span&gt;{&quot; &quot;}
          &lt;br /&gt;
          &lt;span className=&quot;detail&quot;&gt;
            {&quot; &quot;}
            {this.props.currentZone.numComments} comments{&quot; &quot;}
          &lt;/span&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>