CODEWITHSUNDEEP
javascriptreactjsaxiosaxios-mock-adapter
anon311
anon311

Reputation: 11

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

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

Upvotes: 1

Views: 6809

Answers (1)

Batato
Batato

Reputation: 568

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.

Upvotes: 5

Related Questions