[Vuejs]-400 Bad request for Token Obtain Pair, Django REST simpleJWT and Vue 3 composition API

by

0👍

  1. Check ALLOWED_HOSTS:
ALLOWED_HOSTS = ['127.0.0.1', 'localhost']

or to match any:

ALLOWED_HOSTS = ['*']
  1. Set headers and catch for error, maybe there will be more information?
fetch(TOKEN_URL, {
  method: "POST",
  headers: {
    "Content-type": "application/json",
    "X-CSRFToken": csrftoken
  },
  body: JSON.stringify({
    username: username,
    password: password
  })
})
  .then(response => {
    console.log(response);
  })
  .catch(function(error) {
    console.log("ERROR", error);
  });

  1. Check a web developer console? How does your request look like? Do you send proper data in the request?

  2. If you are using DRF with JWT, the CSRF token is not required by default.

  3. I store token in localStorage. You can check details in my tutorial on React Token-Based Authentication to Django REST API Backend. It is for React, but for Vue will be very similar. At the end of the tutorial, there is also discussion about storing token in localStorage vs cookies httpOnly (worth reading).

Leave a comment