反应.js |如何摆脱 Codesandbox 中的跨域错误

Posted 2023-02-19

【中文标题】反应.js |如何摆脱 Codesandbox 中的跨域错误

【英文标题】：react.js | how to get rid of cross-origin error in Codesandbox

【发布时间】：2018-09-04 16:55:31

【问题描述】：

IN FIREFOX: 当我执行我的代码时，我应该得到的典型错误是：“TypeError: Cannot read property 'setState' of undefined”，相反我收到了一个非常奇怪的跨域错误。

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

错误 引发了跨域错误。 React 无权访问 开发中的实际错误对象。请参阅https://reactjs.org/docs/cross-origin-errors.html 了解更多信息。

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

如何避免Codesandbox in FIREFOX出现跨域错误？

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

【问题讨论】：

我像往常一样遇到错误。 joxi.ru/L21dx5Xc65Wv8m

@lito 您是否尝试使用 create-react-app 运行此代码？当您这样做时，您是否验证了 FF 59.0.1 上的 CORS 问题消失了？如果是这样，我认为这可以归结为codeandbox.io中的一个错误。

【参考方案1】：

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

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

【参考方案2】：

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

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

不要与Cross Origin Resource Sharing混淆

【参考方案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();
    

【参考方案4】：

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

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

在终端上运行 corsproxy 命令

它将在http://localhost:1337 上运行 现在您需要做的是在您的 api 调用中附加上述 URL。假设您需要点击 localhost:3000/customer 才能点击 api。

所以新的网址将是http://localhost:1337/localhost:3000/customer

这将消除 CORS 错误。

在 cmets 中对您的查询进行 cmets。

【参考方案5】：

您似乎需要在服务的 S3 存储桶上启用 CORS：https://s3-eu-west-1.amazonaws.com/codesandbox-downtime/downtime.json

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

【讨论】：

嗨！谢谢。我想我没有很好地解释自己。我知道代码方面的解决方案。我想知道解决方法以避免 FIREFOX 中 Codesandbox 中的跨域错误。

我不确定你的意思。更新后的代码在 Firefox 59.0.1 中运行良好，没有跨域错误。你的FF版本是多少？

我也有 FF 59.0.1。你认为这是 FF 中的配置吗？

我的预感是，这是由于在错误触发时，codesandbox.io 对资源提出的请求。我正在检查更深入的...

@lito 这是代码沙盒上的一个错误。将create-react-app 与您的两个组件一起使用，您会看到没有抛出 CORS 错误。