REST API endpoint returns no response with axios in react, but works fine in browser

Question

I created a simple REST API with express and bodyParser which returns a json object on a GET request to the base url. Works fine in the browser and returns what's expected:

API Endpoint: https://jk9j0.sse.codesandbox.io/ .

Code: https://codesandbox.io/s/magical-montalcini-jk9j0

Then I setup a basic react app to consume this API by sending a GET request with axios. But on calling the API endpoint above, I get no response. Trying to catch the error.request object, I don't see anything that's clearly incorrect in the headers. The error object itself says 'Network Error'. Not sure why, when the API works as expected in a browser.

Note: When I replace my API url with another one, which is expected to send a similar response, things work great. The one that works: https://jsonplaceholder.typicode.com/posts/ I haven't created that one, but used it to model my json object.

React Code: https://codesandbox.io/s/hungry-sun-rq94r

I've tried investigating from several angles but no luck. What am I missing here? Do I need to set some headers in the request? Is this a CORS issue?

Answer 1

Yes, it turned out to be a CORS issue. Had to apply header in the API end-point before sending response. res.header("Access-Control-Allow-Origin", "*") .