如何处理错误 - "Failed to fetch" 在 codesandbox 的 React 应用程序中

Question

我正在 codesandbox 为我的 Yoga App 创建一个自定义活动日历 Component。事实上，我打算在我的 IDE 上做这件事，但想法开始变得非常快，我最终还是使用了它。

我尝试使用 ref={(el) => this.props.testing((this.container = el)) 从 <div/> 获取 width 和 height 然后尝试访问 componentDidMount() 上的暗淡，几乎喜欢解决方案。

突然我开始在 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

我尝试检查我的网络和其他东西，但我不知道如何将其标准化。

我需要对此进行规范化，或者至少能够确保我可以安全地 copy/commit 我的文件到 github 然后在我的 IDE.[=25= 上使用它]

这是我的 sandbox

Answer 1

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

虽然它不是拦截器。你可以关闭模态。就这样

Answer 2

当使用 https 访问 codesandbox 并且您正在使用 http 进行提取调用时，可能会发生此错误。将获取 api 调用更改为 https 可解决此问题

如何处理错误 - "Failed to fetch" 在 codesandbox 的 React 应用程序中

How to handle error - "Failed to fetch" in a React app at codesandbox

javascript

reactjs

codesandbox