react.js |如何摆脱Codesandbox中的跨源错误

Question

IN FIREFOX：当我执行我的代码时，我应该得到的典型错误是：＆＃34; TypeError：无法读取属性＆＃39; setState＆＃39;未定义的＃34;而是我收到了一个非常奇怪的跨源错误。

以下是错误的屏幕截图： http://prntscr.com/iwipnb

  

错误抛出了跨源错误。 React无法访问   开发中的实际错误对象。有关详细信息，请参阅https://reactjs.org/docs/cross-origin-errors.html。

这是我的代码：https://codesandbox.io/s/4885l37xrw

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

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

Answer 1

您似乎需要在服务于：https://s3-eu-west-1.amazonaws.com/codesandbox-downtime/downtime.json

的S3存储桶上启用CORS

要执行此操作，只需导航到您的存储桶，然后单击“权限”选项卡，然后在“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>

Answer 2

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

1. 首先需要安装corsproxy npm软件包。 npm install -g corsproxy

2. 在终端上运行corsproxy命令

3. 它将在http://localhost:1337
上运行
4. 现在您需要做的是使用上面的网址附加您的api电话。让我们说你需要打localhost：3000 /客户来打api。

所以新网址为http://localhost:1337/localhost:3000/customer

这将删除CORS错误。

在评论中对您的问题进行评论。

Answer 3

将其添加到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();
    }

Answer 4

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

Reactjs网站在Cross-origin Errors下对此进行了解释

不要与Cross Origin Resource Sharing

混淆

Answer 5

我已经设置了服务器来支持CORS，但仍然出现此错误。

如果在处理来自服务器的响应时出错，则ReactJS似乎是一个问题。就我而言，它是在尝试将无效响应解析为JSON时发生的。