How to debug failed to fetch in react-admin app

Question

How to debug failed to fetch in react-admin app.

If I use http://jsonplaceholder.typicode.com it works, with custom API it doesn't work. The custom API is just a wrapper on top of typicode API so that I can replace one after one. The custom API works fine without any issues.

Any help in troubleshooting is appreciated.

const dataProvider = jsonServerProvider('http://xxxxxx/api');
//const dataProvider = jsonServerProvider('http://jsonplaceholder.typicode.com');
const App = () => (<Admin dataProvider={dataProvider}>
                    <Resource name="posts" list={ListGuesser}/>
                    <Resource name="users" list={ListGuesser} />
                    <Resource name="comments" list={ListGuesser} />
                    <Resource name="photos" list={ListGuesser} />
                    <Resource name="albums" list={ListGuesser} />
                    <Resource name="todos" list={ListGuesser} />
                </Admin>);

Answer 1

This could be due to several factors, and to further diagnose I'd inspect the console and network requests in your browser.

I came across the following error in the console:

The page at was loaded over HTTPS, but requested an insecure resource This request has been blocked; the content must be served over HTTPS.

The solution was to change the URL of the dataprovider (jsonplaceholder) from http:// to https://