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

I tried the cache, memory, but it could not help at all – Arp Mar 25 '20 at 03:56 — Arp, Mar 25 '20 at 03:56

Barun Patro · Accepted Answer · 2020-03-25T03:58:57.770

3

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

edited Mar 25 '20 at 03:58

answered Mar 25 '20 at 03:55

Barun Patro

860
4
13

Oh so this is not on me. It's some sort of bug on codesandbox that's going on? – Arp Mar 25 '20 at 03:56
Oh I see! Thanks so much for the feedback. I'm relieved =) – Arp Mar 25 '20 at 03:59
@Alioshr.. if my answer helped u.. pls do accept it too. – Barun Patro Mar 25 '20 at 04:01
tks. I still need to wait for 3 min to accept an answer =) I will accept it for sure – Arp Mar 25 '20 at 04:02
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/210279/discussion-between-aliosh-r-and-barun-patro). – Arp Mar 25 '20 at 04:17

score 1 · Answer 2 · answered Jun 06 '21 at 06:47

1

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

answered Jun 06 '21 at 06:47

Kondalarao V

790
5
3

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

2 Answers2