web-dev-qa-db-ja.com

キャッチされないエラー：クロスオリジンエラーがスローされました。 Reactは開発中の実際のエラーオブジェクトにアクセスできません

ゾーンを送信するたびに、「Uncaught Error：Cross-Origin error was throwed。」というエラーが表示されます。 Reactは開発中の実際のエラーオブジェクトにアクセスできません 'これは、古い状態が新しい状態に変更されているときに発生していると思う送信ゾーンボタンを押したときにのみ発生します。（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>
    );
}

}

javascriptnode.jsreactjssuperagent
9
William

これはCORSの問題ではありません。一般に、関数の呼び出しに問題があります。この行を確認してください

this.props.onCreate(this.state.zone)
4
Anuruddha Thennakoon

それが誰かを助けるなら、私の状態の一部を引数としてコールバック関数を呼び出そうとする同様の問題がありました。私の決議は、コンポーネントはマウントを約束した後にそれを呼び出すことでした。これはあなたのコードの正確な解決策ではありませんが、誰かを助けるかもしれません：

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())
        })
}
1
Ryan Brockhoff

私にとって、私はクリアされたサイトデータで、うまく機能しています

0
Abdulla Zulqarnain

また、react-reduxでコードを実行しているときに、サンドボックスでも同じ問題が発生しました。 this.props.anymethod()を直接呼び出すと、このエラーが発生します。ローカルで処理してから、メソッド内からpropsメソッドを実行してください。

このようなもの：

このシナリオでクロスオリジンの問題を解決しました

0
Vinod Chauhan