Javascript 400令牌获取对、Django REST simpleJWT和Vue 3组合API的错误请求

从我的vue应用程序向django rest api发送表单时，获取刷新和访问令牌时出现问题。COR已启用。通过RESTAPI页面注册并使用postman不会导致任何问题。使用Vue发送post请求时，

posthttp://127.0.0.1:8000/api/token/ 400（错误请求）

在控制台中弹出如何存储/显示返回的刷新和访问令牌？有什么建议吗

<template>
  <div>
    auth 1
    <div id="authenticationDiv">
      <form action="" v-on:submit.prevent="loginUser">
        <input type="text" v-model="username" />
        <input type="text" v-model="password" />
        <button @click="loginUser(username, password)">
          login
        </button>
      </form>
    </div>
    <div>
      <div>acess: {{ accessToken }}</div>
      <div>refresh: {{ refreshToken }}</div>
      <button @click="DisplayText(username, password)">+</button>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const username = ref("aleksisDjango");
    const password = ref("zimbabwe123");

    const accessToken = ref("");
    const refreshToken = ref("");

    const TOKEN_URL = "http://127.0.0.1:8000/api/token/";

    // function getCookie(name) {
    //   let cookieValue = null;
    //   if (document.cookie && document.cookie !== "") {
    //     const cookies = document.cookie.split(";");
    //     for (let i = 0; i < cookies.length; i++) {
    //       const cookie = cookies[i].trim();
    //       // Does this cookie string begin with the name we want?
    //       if (cookie.substring(0, name.length + 1) === name + "=") {
    //         cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
    //         break;
    //       }
    //     }
    //   }
    //   return cookieValue;
    // }
    // const csrftoken = getCookie("csrftoken");

    async function loginUser(username, password) {
    // var csrftoken = getCookie("csrftoken");
      fetch(TOKEN_URL, {
        method: "POST",
        headers: {
          "Content-type": "application/json",
            // "X-CSRFToken": csrftoken,
        },
        body: JSON.stringify({
          username: username,
          password: password,
        }),
      }).then((response) => {

        username = "";
        password = "";

        return response;
      });
    }

    function DisplayText(username, password) {
      console.log(`username:${username}, password:${password}`);
    }

    return {
      username,
      password,
        // csrftoken,
      loginUser,
      accessToken,
      refreshToken,
      DisplayText,
    };
  },
};
</script>

认证1
登录
访问：{{accessToken}
刷新：{{refreshToken}}
+
从“vue”导入{ref}；
导出默认值{
设置（）{
const username=ref（“aleksisDjango”）；
const password=ref（“zimbabwe123”）；
const accessToken=ref（“”）；
常数refreshtToken=ref（“”）；
const TOKEN_URL=”http://127.0.0.1:8000/api/token/";
//函数getCookie（名称）{
//让cookieValue=null；
//if（document.cookie&&document.cookie！==“”）{
//const cookies=document.cookie.split（“；”）；
//for（设i=0；i{
用户名=”；
密码=”；
返回响应；
});
}
函数DisplayText（用户名、密码）{
log（`username:${username}，password:${password}`）；
}
返回{
用户名，
密码，
//csrftoken，
登录用户，
accessToken，
刷新令牌，
显示文本，
};
},
};

检查

允许的\u主机

：

ALLOWED_HOSTS=['127.0.0.1'，'localhost']

或匹配任何：

ALLOWED_HOSTS=['*']

设置标题和错误捕获，也许会有更多信息

fetch（令牌\u URL{
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”，
“X-CSRFToken”：CSRFToken
},
正文：JSON.stringify({
用户名：用户名，
密码：密码
})
})
。然后（响应=>{
控制台日志（响应）；
})
.catch（函数（错误）{
console.log（“错误”，ERROR）；
});  

检查web开发人员控制台？你的请求看起来怎么样？您是否在请求中发送了正确的数据

如果将DRF与JWT一起使用，默认情况下不需要CSRF令牌

我将令牌存储在本地存储中。您可以在我的网站上查看详细信息。这是针对React的，但对于Vue则非常类似。在本教程的最后，还讨论了在localStorage中存储令牌与在cookies httpOnly中存储令牌（值得一读）

---

添加了

允许的\u HOSTS=['*']

，从第二点复制了代码。仍然会得到一个错误。将

console.log（response）

更改为

console.log（response.json（））当我提交用户名和密码时，我得到2个待定的承诺。第一个承诺持有提交信息的对象，第二个承诺持有具有访问和刷新令牌的
[[PromiseState]]：“fulfiled'，[[PromiseResult]]：对象。也许你知道我做错了什么D