"<i>Uncaught Error: A cross-origin error was thrown.<\/i>未捕获的错误：引发了跨域错误。<\/b> <i>React doesn&#39;t have access to the actual error object in development<\/i> React 无法访问开发中的实际错误对象<\/b>"

Question

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

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

它仅在我按下提交区域按钮时发生，我猜这是在将旧状态更改为新状态时发生的。 (this.setState)<\/code>

CreateZone.js<\/strong>

 Zones.js<\/strong>
 Zone.js<\/strong>

Answer 1

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

希望你的错误得到解决

Answer 2

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

Answer 3

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

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

Answer 4

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

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

Answer 5

清除令牌存储对我有用。

Answer 6

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

Answer 7

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

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

Answer 8

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

Answer 9

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

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

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

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

Answer 11

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

Answer 12

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

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

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

Answer 13

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

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

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

Answer 14

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

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

Answer 15

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

Answer 16

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

像这样的东西：

我在这种情况下解决了跨域问题

Answer 17

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

Answer 18

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

Answer 19

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

Answer 20

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

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

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

当您处理本地存储时，请注意外卖。

Answer 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 的回答一样：看看后面的代码。

Answer 22

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

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

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

Answer 23

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

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

像下面这样

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

Answer 24

您可以使用检查选项卡控制台查看错误详细信息。 就我而言，发现了主要错误。 在此处输入图片说明

Answer 25

尝试更改浏览器，就我而言，Safari 给出了正确的错误。

Answer 26

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

Answer 27

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

"