Question

每次我提交区域时，都会显示此错误＆＃39;未捕获错误：抛出了跨源错误。 React无法访问开发中的实际错误对象＆＃39;只有当我按下提交区域按钮时才会发生这种情况，我认为当旧状态被更改为新状态时我会发生这种情况。（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

我经常也会收到此错误，以解决此错误 1。开放开发工具 2.转到应用程序部分 3.右键单击以清除本地存储。

希望您的错误得到解决

Answer 2

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

Answer 3

我也遇到了这个错误。清除 localStorage 会使错误消失。

在开发者工具中打开您的控制台。
找到应用程序标签。
找到本地存储。
右键单击区域设置存储，然后单击清除以清除控制台。

Answer 4

清除令牌存储对我有用。

Answer 5

我在对设置的 cookie 值使用 JSON.parse() 时遇到此错误。

Answer 6

检查您的令牌对象。在本地存储中可能未定义。您需要清除这一点，一切都会好起来的。 清除存储令牌的本地存储或cookie

Answer 7

我一次又一次遇到相同的错误，因为我的上下文存储试图从未定义的localStorage访问某些内容。如果有人使用上下文API偶然发现了此错误，则清除localStorage可能会有所帮助，如上面许多答案所述！：）

Answer 8

如果它可以帮助任何人，则在尝试使用部分状态作为参数调用回调函数时，我也会遇到类似的问题。我的决议是在答应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())
        })
}

Answer 9

检查您的本地商店。我认为存在一个未定义的值，这就是为什么发生此错误

Answer 10

它有时是由浏览器引起的。

我已经关闭并打开了浏览器。它解决了我的问题。

Answer 11

那些说“清除你的 localStorage”...如果我需要 localStorage...怎么办？

更好的方法是检查您访问 localStorage 的每个点。检查每个输入和输出点。确认您的输入和输出是您所期望的，这意味着不仅有输出，还有它是什么类型？

例如，如果您有一个令牌并且您正在尝试 JSON.parse(yourToken) 而您的令牌不是字符串，或者尚未被字符串化...您将收到此错误

Answer 12

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

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

Answer 13

如果可能，请不要在渲染或状态中的任何地方使用：JSON.parse("your data")，我已经解决了在 mycomponent 中删除的问题

Answer 14

令人惊讶的是，由于逗号放错了位置，我的问题出在本地存储中。

如果像这样输入逗号：{ "myVar":true, } 并重新加载开发环境，则会抛出此错误。只需将其带走即可恢复正常。

我将此作为答案记录下来，以便我在进行一些本地存储测试时可以回忆起来，并且可能会帮助遇到相同问题的人，因为 React 页面提出的解决方案建议了不同的方法。

>

在处理本地存储时要注意。

Answer 15

从字面上看，https://reactjs.org/docs/cross-origin-errors.html上提到的第一件事是，但如果其他人首先来这里：

<script crossorigin src="..."></script>

如果您要从与页面不同的域中提供捆绑软件，则需要。例如。我在浏览器中点击了localhost:8040，并从位于localhost:3000的webpack开发服务器中提供了捆绑软件。

Answer 16

您可能在此行中收到此错误：

console.log('SubmitZone: ' + JSON.stringify(this.state.zone))

您正在尝试将此this.state.zone强制转换为字符串类型的值，可能为null，空或格式不正确

Answer 17

之所以这样显示，是因为出于安全考虑，React不会显示错误的回溯。该错误可能与CORS完全无关。我建议查看控制台中可能出现的错误。解决这些错误可能会解决您的问题。

Answer 18

在其他浏览器实例中关闭应用程序窗口可能有助于解决此错误。具体来说，该错误与此处描述的浏览器行为有关：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS。

Answer 19

清除本地存储中的令牌对我有帮助。

Answer 20

在使用react-redux进行代码时，我在沙箱上也遇到了同样的问题。每当您直接致电this.props.anymethod()时，都会返回此错误，并回复您。尝试在本地处理它，然后从方法内部击中props方法。

类似这样的东西：

I solved cross-origin problem in this scenario

未捕获错误：抛出了跨源错误。 React无法访问开发中的实际错误对象

20 个答案: