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

IT技术 javascript node.js reactjs superagent
2021-03-28 03:28:01

每次提交区域时,它都会显示此错误:

'未捕获的错误:抛出了跨域错误。React 无权访问开发中的实际错误对象”

它仅在我按下提交区域按钮时发生,我猜当旧状态更改为新状态时会发生这种情况。 (this.setState)

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

区域.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>
    );
  }
}
6个回答

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

希望你的错误得到解决

如果这不能解决您的问题,您还应该尝试reactjs.org/docs/cross-origin-errors.html 上的建议
2021-05-24 03:28:01
如果您“经常”收到此错误,则清除本地 cookie 可能不是解决方案;)
2021-05-30 03:28:01
为什么它会破坏..... 希望它不会发生在 prod env 中
2021-06-19 03:28:01
但是当我刷新页面时,错误仍然发生。任何可能的解决方案?
2021-06-20 03:28:01

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

停止站点, localhost:3000 并再次运行,它可以工作
2021-06-22 03:28:01

当我使用JSON.parse()我设置的 cookie 的值时,我收到了这个错误

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

我在答案中添加了更多信息,希望对您有所帮助。
2021-05-24 03:28:01
我遇到了同样的问题,这就是我抛出错误的原因!
2021-05-24 03:28:01
很好的答案,这也是我的问题,我尝试使用JSON.parse()一个空的 URL 参数 - 因此解析的参数是“未定义的”并且 react 确实抛出了错误,正如@jfunk 正确指出的那样被解释为跨域错误。
2021-05-27 03:28:01
你的答案在哪里?你修好了吗?
2021-06-03 03:28:01

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

  1. 在开发人员工具中打开您的控制台。
  2. 找到应用程序选项卡。
  3. 找到本地存储。
  4. 右键单击区域设置存储,然后单击清除以清除控制台。

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

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