未捕获的错误：引发了跨域错误。 React 无法访问开发中的实际错误对象答案

【问题标题】：Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development未捕获的错误：引发了跨域错误。 React 无法访问开发中的实际错误对象
【发布时间】：2018-07-14 15:28:09
【问题描述】：

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

'未捕获的错误：引发了跨域错误。反应没有访问开发中的实际错误对象'

只有当我按下提交区域按钮时才会发生这种情况，我猜这是在将旧状态更改为新状态时发生的。 (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>
    );
  }
}

【问题讨论】：

你的错误与react无关。阅读更多关于 CORS developer.mozilla.org/en-US/docs/Web/HTTP/CORS

标签： javascript node.js reactjs superagent

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

类似这样的：

I solved cross-origin problem in this scenario

【讨论】：

【解决方案4】：

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

【讨论】：

停止站点，localhost:3000 并再次运行，它可以工作

【解决方案5】：

清除令牌存储对我有用。

【讨论】：

【解决方案6】：

我也经常遇到这个错误，要解决这个错误 1。打开开发工具 2. 转到应用程序部分 3. 右键清除本地存储。

希望您的错误得到解决

【讨论】：

为什么会破坏.....希望它不会发生在 prod env 中
但是当我刷新页面时，仍然出现错误。有什么可能的解决方案吗？
如果这不能解决您的问题，您还应该尝试reactjs.org/docs/cross-origin-errors.html的建议
如果您“经常”收到此错误，可能清除本地 cookie 不是解决方案；)

【解决方案7】：

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

【讨论】：

这应该是一条评论
这是一条评论

【解决方案8】：

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

【讨论】：

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

【解决方案9】：

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

【讨论】：

【解决方案10】：

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

【讨论】：

请指出您的答案所针对的问题的哪些新方面，以免被误认为只是重复现有答案中已经涵盖的内容。

【解决方案11】：

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

【讨论】：

【解决方案12】：

检查您的本地存储。我认为存在未定义的值这就是发生此错误的原因

【讨论】：

【解决方案13】：

您可能会收到此行的此错误：

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

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

【讨论】：

这正是我的问题。我试图 JSON.strinfigy 一个空值

【解决方案14】：

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

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

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

【讨论】：

【解决方案15】：

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

在开发者工具中打开您的控制台。
找到应用程序选项卡。
找到本地存储。
右键单击区域设置存储并单击清除以清除控制台。

【讨论】：

【解决方案16】：

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

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

【讨论】：

不知何故这个帮助了我

【解决方案17】：

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

（编辑：似乎只在Chrome中，FF抛出解析错误，见cmets）

每当 JSON.parse() 接收到无效字符串时，React 都会引发跨域错误。检查您存储的 JSON 值的有效性，因为 JSON 结构对其格式有严格的规定。

【讨论】：

你的答案在哪里？你修好了吗？
我在答案中添加了更多信息，希望对您有所帮助。
好答案，这也是我的问题，我尝试JSON.parse() 一个空的 URL 参数 - 因此解析的参数是“未定义的”并且 react 确实抛出了错误，它作为@jfunk 正确注释被解释为跨域错误。
我遇到了同样的问题，这就是我的错误被抛出的原因！
我也遇到了同样的问题，但是当我使用Firefox而不是Chrome时，我意识到解析错误，因为前者表明存在解析错误而不是Chrome发出的跨域。跨度>

【解决方案18】：

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

如果您输入这样的逗号：{ "myVar":true, } 并重新加载您的开发环境，则会引发此错误。恢复正常所需要的只是把它拿走。

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

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

【讨论】：

【解决方案19】：

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

【讨论】：

【解决方案20】：

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

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

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

【讨论】：

这需要更高，我认为清除 localStorage 的一个答案就足够了。吉姆的回答帮助我解决了我的问题。在我的后续代码中查找 JSON.parse 并发现错误的 JSON 日期字符串是罪魁祸首。

【解决方案21】：

对我来说，当我从回调函数内部调用 setState 时会引发此错误。虽然错误是在setState 上引发的，但实际错误来自接下来发生的事情：渲染 DOM（由setState 发起）。

componentDidMount() {  
    if (this.state.songs.length === 0) 
        fetch("/collection/tracks")
        .then(res => res.json())
        .then(data => {
            this.setState({
                songs: data
            });
        });
}

然后从渲染开始，我尝试解析一个真正的罪魁祸首 JSON 日期，因为它试图这样做显然不是 JSON 日期字符串：

{new Date(JSON.parse(song.added_at)).toLocaleDateString()}

就像@Jim 的回答一样：看看后面的代码。

【讨论】：

【解决方案22】：

当您在本地存储中有一些对象格式的数据并尝试使用JSON.parse()方法将对象转换为开发中的对象时，通常会发生此错误。

localStorage.setItem("user",user); //store as object

const user = JSON.parse(localStorage.getItem("user")); // trying to convert to object

【讨论】：

【解决方案23】：

由于JSON.parse(localStorage.getItem("user") || '');，我收到了错误消息问题是如果JSON.parse() 没有得到正确的格式，它就会抛出这个错误。

我所做的唯一更改是在单引号中传递空对象，例如 '{}'

喜欢下面这个

JSON.parse(localStorage.getItem("user") || '{}');

【讨论】：

【解决方案24】：

判断你是否使用 JSON.parse() 解析 javascript 对象。它可能会在 react.js 中导致这种类型的错误！

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。
这在同一问题的其他答案中已经提到过3 months ago、4 months ago 和11 months ago

【解决方案25】：

我曾经遇到过这个错误，我的问题是我没有为我的一个变量定义let/const。

【讨论】：