如何处理错误 - Codesandbox 的 React 应用程序中的“无法获取”

Posted 2023-02-19

【中文标题】如何处理错误 - Codesandbox 的 React 应用程序中的“无法获取”

【英文标题】：How to handle error - "Failed to fetch" in a React app at codesandbox

【发布时间】：2020-07-05 15:21:09

【问题描述】：

我正在为 codesandbox 上的瑜伽 App 构建自定义活动日历 Component。其实我打算在我的IDE 上做这个，但想法开始很快就开始了，我最终使用了它。

我试图使用ref=(el) => this.props.testing((this.container = el)) 从<div/> 获取width 和height，然后尝试访问componentDidMount() 上的暗淡，非常类似于this 解决方案。

突然我开始在codesandbox 上收到以下错误：

TypeError

Failed to fetch

This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.
This error overlay is powered by `react-error-overlay` used in `create-react-app`.

在控制台上：

Failed to load resource: net::ERR_CERT_COMMON_NAME_INVALID

(index):1 Uncaught (in promise) TypeError: Failed to fetch

(index):1 Access to fetch at 'https://codesandbox.io/api/v1/sandboxes/wm1dl/cache' from origin
'https://wm1dl.codesandbox.io' has been blocked by CORS policy: Response to preflight request
doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the
requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors'
to fetch the resource with CORS disabled.

codesandbox.io/api/v1/sandboxes/wm1dl/cache:1 Failed to load resource: net::ERR_FAILED

我尝试检查我的网络和其他内容，但我不知道如何对其进行规范化。

我需要对此进行规范化，或者至少能够确保我可以安全地将我的文件复制/提交到 github，然后在我的 IDE 上使用它。

这是我的sandbox

【问题讨论】：

缓存、内存都试过了，完全没用

【参考方案1】：

当使用 https 访问代码和框并且您正在进行的 fetch 调用使用 http 时，可能会发生此错误。将 fetch api 调用更改为 https 即可解决此问题

【参考方案2】：

显然我们很多人都遇到了这个问题。这最终应该会消失..

虽然它不是一个拦截器。你可以关闭模​​式。就这样

【讨论】：

哦，所以这不属于我。这是代码沙盒上的某种错误吗？

哦，我明白了！非常感谢您的反馈。我松了一口气=)

@Alioshr.. 如果我的回答对你有帮助.. 请也接受它。

tks。我仍然需要等待 3 分钟才能接受答案 =) 我一定会接受的

让我们continue this discussion in chat。