Why does Axios get call return a 404 error with basic setup?

Question

I'm trying to set up a React project and want to get a basic get call working. The url I'm using is https://jsonplaceholder.typicode.com/todos/1 just for testing and to see if everything is working well. However, I get a 404 error back. The call I make is

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => console.log(response))
  .catch(error => console.log(error.response));

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>

When I try this call with the Fetch API, I get the correct response but with Axios, I get back this error {status: 404, config: {…}, data: undefined}. I've been trying to fix this for days and nothing has worked. Is there some type of obvious setup I may have missed?

I followed this tutorial for the most part: https://hackernoon.com/tutorial-how-to-make-http-requests-in-react-part-3-daa6b31b66be

Any help is appreciated :)

Could you check in console or in networks tab what is the URL being called? — Aditya, Oct 30 '18 at 15:20
I am just wondering if in base/global config the base url is already applied — Aditya, Oct 30 '18 at 15:21
@Aditya Just checked, the url being called is the right one. I'm not sure what could be causing this. — anon311, Oct 30 '18 at 15:24
Can you print the complete request headers? The source and not the parsed — Aditya, Oct 30 '18 at 15:26
according to tags you are using axios-mock-adapter, don't you? if you do than also share how you configure mock adapter itself. by default it returns 404 for all requests except those are mocked explicitly. — skyboyer, Oct 30 '18 at 15:29
@skyboyer I haven't explicitly configured the mock adaptor. Can you tell me how to do this? — anon311, Oct 30 '18 at 15:35
I guess I don't use it then? I have the npm package and I thought it was needed for axios to function but I don't explicitly use it. — anon311, Oct 30 '18 at 15:58

score 5 · Answer 1 · edited Aug 28 '20 at 08:38

I just had the same problem, as pointed out by @skyboyer the problem is likely to be due to having turned on the axios-mock-adapter. If this is the case, you can confirm by looking to your actual network requests in the browser console that axios is not doing any request at all (no request to the desired url appears in the list). Check in your code where is a line like this:

const mock = new MockAdapter(axios);

comment it (and related), and hopefully your problem will be solved.

It is also possible to create a mock adapter instance based on empty axios instance (i.e. empty base url). Something like this:

const mock = new MockAdapter(axios.create());

In this way you won't have to change your test environment each time you want to run test.

Why does Axios get call return a 404 error with basic setup?

1 Answers1