Reactjs react.js |如何消除Codesandbox中的跨源错误

在FIREFOX中：当我执行我的代码时，我应该得到的典型错误是：“TypeError:无法读取未定义的属性'setState'，相反，我收到了一个非常奇怪的跨源错误

以下是错误的屏幕截图：

错误引发了一个跨源错误。React没有访问的权限 开发中的实际错误对象。有关更多信息，请参阅

这是我的密码：

如何避免FIREFOX中Codesandbox中的跨源错误

---

EDIT1：我知道什么是代码错误（bind（this））。我正在查找跨源错误firefox问题。谢谢

看起来您需要在S3存储桶上启用CORS，用于：

为此，只需导航到您的bucket，然后单击Permissions选项卡，然后在CORS框中输入一个具有您想要的权限的XML文档。允许任何主机发出GET请求的示例权限：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>http://*</AllowedOrigin>
    <AllowedOrigin>https://*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

http://*
https://*
得到
*
得到

您可以使用corsproxy从本地计算机上访问本地主机API

首先需要安装corsproxy npm包。 npm安装-g corsproxy

在终端上运行corsproxy命令

它将继续运行

现在您需要做的是用上面的url追加api调用。假设您需要点击localhost:3000/客户才能点击api 因此，新的url将是

这将删除CORS错误

---

在注释中对您的查询进行注释。

将此添加到API文件构造函数中

public function __construct($config = 'rest'){
   header('Access-Control-Allow-Origin: *');
   header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
   header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
      parent::__construct();
    }

---

您问题中提到的跨源错误是Codesandbox的github存储库中的一个错误（截至2019年12月）

Reactjs网站在下面对此进行了解释

---

不要与

混淆，我的服务器设置支持CORS，但它仍然给我这个错误

---

如果在处理来自服务器的响应时出现错误，则与

ReactJS

类似。在我的例子中，它是在试图将无效响应解析为

JSON

时发生的，我像往常一样出现了错误@lito您是否尝试使用create react应用程序运行此代码？当您这样做时，是否验证了FF 59.0.1上的CORS问题消失？如果是这样，我认为这可以归结为codesandbox.io.Hi中的一个bug！谢谢我想我没有解释清楚。我知道代码方面的解决方案。我想知道如何避免FIREFOX中Codesandbox的跨源错误。我不知道你的意思。更新后的代码在Firefox 59.0.1中运行良好，没有跨源错误。你的FF版本是什么？我还有FF 59.0.1。你认为这是FF中的配置吗？我的直觉是，这是因为当错误触发时，codesandbox.io请求了资源。我正在更深入地检查…@lito这是codesandbox上的一个bug。对两个组件使用

create react app

，您将看到没有抛出CORS错误。