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

Question

每次我提交一个区域时，都会显示以下错误：

'未捕获的错误：抛出了跨源错误。在开发中，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

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

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

- William

---

你的错误与React无关。请阅读有关CORS的更多信息：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS - cdoshi

Answer 1

我也经常遇到这个错误，为了解决它：

1. 打开开发者工具 2. 进入应用程序部分 3. 通过右键单击清除本地存储。

希望你的错误得到解决。

- SAIFUL ISLAM

---

为什么会出现问题，是什么导致了这个错误......希望这种情况不要发生在生产环境中。 - Akki619

但是当我刷新页面时，错误仍然出现。有可能的解决方案吗？ - Chandler Bing

如果这不能解决你的问题，你也应该尝试 https://reactjs.org/docs/cross-origin-errors.html 上的建议。 - Alex von Brandenfels

如果您经常遇到此错误，清除本地Cookie可能不是解决方案 ;) - Sonic Soul

对于你来说，错误可能发生在本地存储对象中，但它同样可能发生在 cookie 或其他数据中。除非你遇到的问题发生在本地存储中（未正确写入数据到本地存储），否则这不是一个解决方案。 - John

Answer 2

当我使用JSON.parse()对我设置的cookie值进行操作时，出现了这个错误。

（编辑：似乎只在Chrome中出现，在FF中会抛出解析错误，请参见评论部分）

当JSON.parse()接收到无效的字符串时，React会抛出跨源错误。检查您正在存储的JSON值的有效性，因为JSON结构对其格式要求严格。

- jfunk

---

你的答案在哪里？你修好了吗？ - Sjors Hijgenaar

我已经在答案中添加了更多信息，希望能对您有所帮助。 - jfunk

好的答案，这也是我的问题，我试图对一个空的URL参数进行JSON.parse() - 解析的参数因此为“undefined”，react会抛出错误，正如@jfunk正确指出的那样，被解释为跨域错误。 - Sváťa Filev

我遇到了相同的问题，这就是导致我的错误被抛出的原因！ - Tekill

我曾经遇到过同样的问题，但是当我使用Firefox时，我意识到了解析错误，因为前者指出了解析错误，而不是Chrome发出的跨域问题。 - drasc

Answer 3

对我来说，我只是清除了网站数据，然后就正常运作了。

- zulqarnain

---

停止网站，本地主机：3000，然后再次运行，它就可以工作了。 - Somnath Kadam

Answer 4

我也遇到了这个错误。清除本地存储可以解决该错误。

1. 在开发者工具中打开控制台。
2. 找到应用程序标签页。
3. 找到本地存储。
4. 右键单击本地存储，然后点击清除以清除控制台。

- Abdulsalam

Answer 5

这不是CORS问题，一般来说是调用函数时出了问题。请检查该行代码。

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

- Anuruddha Thennakoon

Answer 6

清空令牌存储对我有效。

- Dipesh Lohani

Answer 7

请检查您的本地存储。我认为其中存在一个未定义的值，这就是出现此错误的原因。

- Spandan Joshi

Answer 8

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

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

如果你在不同的域名上提供bundle文件，那么这个选项是必要的。例如，我在浏览器中打开的是localhost:8040，而我的webpack dev server正在localhost:3000上提供bundle文件。

- mowwwalker

---

希望能够点赞更多。 - Hinrich

Answer 9

请检查您的令牌对象。在本地存储中可能未定义。您需要清除它，一切就会正常。 清除您存储令牌的本地存储或Cookie。

- Spandan Joshi

---

在我的情况下，这是一个问题@Spandan 谢谢 - Prajwal

Answer 10

如果有帮助的话，我也曾遇到类似的问题，尝试将我的状态的一部分作为参数调用回调函数。我的解决方法是在 Component Did Mount 的 promise 之后调用它。这可能会对某些人有所帮助，即使这不是你代码的完美解决方案。

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

- Ryan Brockhoff