I'm encountering an issue with obtaining the refresh and access tokens when sending a form from my Vue app to the Django REST API. CORS has been enabled, and signing up through the REST API page or using Postman doesn't pose any problems. However, when I send a POST request with Vue, I receive a
POST http://127.0.0.1:8000/api/token/ 400 (Bad Request)<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/";
async function loginUser(username, password) {
fetch(TOKEN_URL, {
method: "POST",
headers: {
"Content-type": "application/json",
},
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,
loginUser,
accessToken,
refreshToken,
DisplayText,
};
},
};
</script>