javascript - Axios request returns 401 despite having an authorization header

Question

I'm trying to patch data to a django API using axios using this snippet:

nextQuestion = () => {
  if (this.state.currentIndex === 0) return;

  const token = this.props.token;
  const configs = {
    headers: {
      Authorization: `Token ${token}`,
    },
    data: {
      quiztaker: this.state.data[0].quiz.quiztakers_set.id,
      question: this.state.data[0].quiz.question_set[this.state.currentIndex]
        .id,
      answer: Number(this.state.answer),
    },
  };
  console.log(configs);
  axios
    .patch("/api/save-answer/", configs)
    .then((response) => {
      console.log(response);
    })
    .catch((error) => {
      console.log(error);
    });

  this.setState({
    currentIndex: this.state.currentIndex - 1
  });
};

Answer 1

With axios.patch() it should be executed axios.patch(url, data, config)....

const data = {
  "quiztaker": this.state.data[0].quiz.quiztakers_set.id,
  "question": this.state.data[0].quiz.question_set[this.state.currentIndex].id,
  "answer": Number(this.state.answer),
};
const token = this.props.token;
const configs = {
  "headers": {
    "Authorization": `Token ${token}`,
  },
};

axios
  .patch("/api/save-answer/", data, configs)
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });