How to debug failed to fetch in react-admin app

user_10875927 0
Viewed 1835

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>);
react-admin reactjs
2 Answers

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://

user_32009500

You can browse your web and open dev tools and explore the Network tab. You will see the concrete http request being sent and why it doesn't work (e.g. it could be CORS issue).

user_29186060
Related