I've been fetching some data from a private API with axios, but now I'm having a problem fetching data from one specific endpoint.

The interesting thing is that with the built in fetch API, I'm receiving 200 response, but the identical request with axios keeps retuning 401 error. Any idea what can be the problem?

This code works:

const upVoteCommentTwo = async () => {
  console.log(localStorage.getItem("access_token"));
  try {
    const response = await fetch(
      `/${mentId}/vote/up`,
      {
        method: "POST",
        headers: {
          "X-API-KEY": "XXX",
          "Authorization": localStorage.getItem("access_token"),
        },
      }
    );

    console.log(await response.status);
  } catch (err) {
    console.log(err);
  }
};

And this does not work:

const upVoteCommentOne = async () => {
  console.log(localStorage.getItem("access_token"));
  try {
    const response = await axios.post(
      `/${mentId}/vote/up/`,
      {
        headers: {
          "Content-Type": "application/json",
          "X-API-KEY": "XXX",
          "Authorization": localStorage.getItem("access_token"),
        },
      }
    );

    console.log(response.status);
  } catch (err) {
    console.log(err);
  }
};

I've been fetching some data from a private API with axios, but now I'm having a problem fetching data from one specific endpoint.

The interesting thing is that with the built in fetch API, I'm receiving 200 response, but the identical request with axios keeps retuning 401 error. Any idea what can be the problem?

This code works:

const upVoteCommentTwo = async () => {
  console.log(localStorage.getItem("access_token"));
  try {
    const response = await fetch(
      `https://exammple./ments/${mentId}/vote/up`,
      {
        method: "POST",
        headers: {
          "X-API-KEY": "XXX",
          "Authorization": localStorage.getItem("access_token"),
        },
      }
    );

    console.log(await response.status);
  } catch (err) {
    console.log(err);
  }
};

And this does not work:

const upVoteCommentOne = async () => {
  console.log(localStorage.getItem("access_token"));
  try {
    const response = await axios.post(
      `https://example./ments/${mentId}/vote/up/`,
      {
        headers: {
          "Content-Type": "application/json",
          "X-API-KEY": "XXX",
          "Authorization": localStorage.getItem("access_token"),
        },
      }
    );

    console.log(response.status);
  } catch (err) {
    console.log(err);
  }
};

• javascript
• reactjs
• axios

Share Improve this question Follow edited Jun 28, 2022 at 8:25 Youssouf Oumar 46.6k1616 gold badges103103 silver badges105105 bronze badges asked May 23, 2022 at 4:51 MaikyMaiky 6922 silver badges77 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

The problem is ing from axios's parameters. One valid way, according to the doc and that seems to be working for most people according to this issue on GitHub is to call it like below, with an object:

const response = await axios({
  method: "post",
  url: `https://example./ments/${mentId}/vote/up/`,
  headers: {
    "Content-Type": "application/json",
    "X-API-KEY": "XXX",
    "Authorization": localStorage.getItem("access_token"),
  },
  data: {/* Your Data Goes Here */},
});

const upVoteCommentOne = async () => {
  console.log(localStorage.getItem("access_token"));
  try {
    const response = await axios.post(
          `https://example./ments/${mentId}/vote/up/`,
         {
           //body:...if any
         }
        headers: {
          "X-API-KEY": "XXX",
          "Authorization": localStorage.getItem("access_token"),
        },
      }
    );

    console.log(response.status);
  } catch (err) {
    console.log(err);
  }
};