Encountering an unusual problem while executing a POST request. There are three different forms on the same page, all with a post method. The first form functions correctly.
However, the other two forms encounter an issue: upon clicking the save button, it redirects to an error page with the message
Cannot POST /http://localhost:4000/cardshttp://localhost:8080/http://localhost:4000/cardsAfter refreshing the page, the request seems to have been successful as a new card is added.
Provided below is a simplified version of my code :
<form action="/http://localhost:4000/teamsettings" method="POST">
<input name="title" class="input-source" v-model="teamsetting.name" type="text">
<input name="description" class="input-source" v-model="teamsetting.description" type="text">
<div type="submit" @click="submitTeamG(teamsetting)">Save</div>
</form>
<form action="/http://localhost:4000/cards" method="POST">
<input v-model="title">
<textarea class="input-resume" v-model="description"></textarea>
<button type="submit" @click="subCard">Save</button>
</form>
<form action="/http://localhost:4000/cards" method="POST">
<input v-model="card.title">
<textarea class="input-resume" v-model="card.description"></textarea>
<button type="submit" @click="modifyCard">Modify</button>
</form>
Further, here are my Axios POST requests :
methods: {
submitTeamG(teamsetting) {
axios.put('http://localhost:4000/teamsettings', {
name: teamsetting.name,
description: teamsetting.description
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
window.location="/backoffice";
},
subCard() {
axios.post('http://localhost:4000/cards', {
title: this.title,
description: this.description,
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
window.location="/backoffice";
},
modifyCard(card) {
axios.put('http://localhost:4000/cards', {
title: card.title,
description: card.description,
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
window.location.reload();
}
},
Observing a 404 error in the console before being redirected to the error page, yet the new data is successfully added to the JSON file in the database. What could be causing this issue?
Appreciate your assistance and time :)