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

Question

I am building a custom event calendar Component for my Yoga App on codesandbox. Actually I was going to do it on my IDE, but the think started to pick up pretty fast and I ended up using it.

I was trying to get the width and height from a <div/> using ref={(el) => this.props.testing((this.container = el)) then trying to access the dims on componentDidMount(), pretty much like this solution.

Suddenly I started getting the following error on 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`.

and on the console:

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

I tried inspecting my network, and other stuff, but I don't know how to normalize this.

I need to normalize this, or be at least able to ensure that I could safely copy/commit my files to github then use it on my IDE.

here is my sandbox

Answer 1

Apparantly a lot of us are getting this issue. this should go away eventually..

Its not a Blocker though. you can just close the modal. just like that

Answer 2

This error could happen when the codesandbox is accessed using https and the fetch call you are making is using http. Changing the fetch api call to https resolves this