Javascript 未捕获的错误：引发了跨源错误。React 无权访问开发中的实际错误对象

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

提问by William

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)

每次我提交区域时，它都会显示此错误“未捕获的错误：引发了跨域错误。React 无法访问开发中的实际错误对象'它仅在我按下提交区域按钮时发生，我猜当旧状态更改为新状态时会发生这种情况。(this.setState)

CreateZone.js

创建区域.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

区域.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

区域.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>
    );
}

}

}

回答by Anuruddha Thennakoon

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

这不是 CORS 问题。通常，调用该函数时存在问题。检查这一行

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

回答by Abdulla Zulqarnain

for me, I just cleared site dataand working fine

对我来说，我刚刚清除了站点数据并且工作正常

回答by Dipesh Lohani

Clearing a token storage worked for me.

清除令牌存储对我有用。

回答by Ryan Brockhoff

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:

如果它对任何人有帮助，我在尝试以我的状态的一部分作为参数调用回调函数时遇到了类似的问题。我的决议是在承诺 Component Did Mount 之后调用它。可能会帮助某人，即使这不是您代码的确切解决方案：

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

回答by Vinod Chauhan

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.

在使用 react-redux 编写代码时，我在沙箱上也遇到了同样的问题。每当您直接调用this.props.anymethod()它时，都会出现此错误。尝试在本地处理它，然后从方法内部点击 props 方法。

Something like this:

像这样的东西：

I solved cross-origin problem in this scenario

我在这种情况下解决了跨域问题