Http request error with codeSandBox (React/Node)

Question

I have strange error in online IDE like CodeSandBox/StackBlitz. I do a sample http request (with axios but with fetch or others the problem is the same) and try to print the response in the console. I use React for the front and node (listen port 8080) for the back, I precise that work when I do exactly the same with create react app, using npm start (localhost:3000 and http request in http://[public ip]:8080/coucou)

react code here (request is in the Main.js file): https://codesandbox.io/s/ww28ry45pl

When I just put http://[public ip]:8080/coucou that work to and I have the good response from server.

Here the error returned by server in codeSandBox (captured by the catch bloc) :

Error {stack: "createError@https://ww28ry45pl.codesandbox.io/node_modules/axios/lib/core/createError.js:16:15 handleError@https://ww28ry45pl.codesandbox.io/node_modules/axios/lib/adapters/xhr.js:87:14 "}

I haven't found anything about this problem.

Answer 1

This is because you are making an HTTP call from a secure communication point (codesandbox). You can simply use/add https on your public URL and it shall work. HTTP Ajax Request via HTTPS Page

Answer 2

In my case I was calling Localhost from codesandbox in https. I solved it by Enabling CORS handling on my localhost server.

Answer 3

Just try again without http:// prefix in the URL. I solved same error :)