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

问题

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 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>
    );
}

}

回答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)

回答2:

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())
        })
}

回答3:

I also got the same issue on sandbox while doing code with react-redux. Whenever you directly call this.props.anymethod() it will revert you with this error. Try to handle it locally and then from within method hit the props method.

Something like this:

I solved cross-origin problem in this scenario