I am trying to build a project in vue 3 for frontend and spring boot in backend. I am using axios to send request but whenever I call axios.get this error pops up but the api call is till being made and the backend function is performing well.But this error is haunting me, I am confused how to solve it. Please help!! error from console enter image description here
<template>
<div class="text-center"><h1 class="text-bg-dark">User Registration</h1></div>
<div>
<form class="form-control text-center" @submit.prevent="register">
<label for="userEmail">Enter your email:</label><br />
<input
type="email"
name="userEmail"
id="userEmail"
class="border-3"
v-model.lazy="dt.userEmail"
/><br />
<label for="userPassword">Enter your password:</label><br />
<input
type="password"
name="userPassword"
id="userPassword"
v-model.lazy="dt.userPassword"
/><br />
<label for="confirmPassword">Enter your password again:</label><br />
<input
type="password"
name="confirmPassword"
id="confirmPassword"
v-model.lazy="dt.confirmPassword"
/><br />
<label for="userNumber">Enter Contact Number</label><br />
<input type="number" id="userNumber" v-model.lazy="dt.userNumber" /><br />
<label for="userAddress">Enter your Address</label><br />
<input
type="text"
id="userAddress"
v-model.lazy="dt.userAddress"
/><br />
<label for="userCity">Pincode</label><br />
<input type="number" id="userCity" v-model.lazy="dt.userCity" /><br />
<br />
<button type="submit">Submit</button>
</form>
</div>
<div>
<otpVerify v-if="registered" :email="dt?.userEmail" @back="back" />
</div>
</template>
<script>
import axios from "axios"
import otpVerify from '../components/otpVerify.vue'
export default {
components:{
otpVerify
},
data() {
return {
registered: false,
dt: {
userEmail: "",
userPassword: "",
confirmPassword: "",
userNumber: "",
userAddress: "",
userCity: "",
},
};
},
methods: {
back(){
this.registered=false;
},
register() {
if (
this.dt.userEmail == "" ||
this.dt.userPassword == "" ||
this.dt.confirmPassword == "" ||
this.dt.userNumber == "" ||
this.dt.userAddress == "" ||
this.dt.userCity == ""
) {
alert("Please fill all the fields");
} else {
if (this.dt.userPassword == this.dt.confirmPassword) {
axios.get(`http://localhost:6969/sendmail/${this.dt.userEmail}`)
.then((response)=>console.log(response))
.error((error)=>console.log(error));
this.registered= !this.registered;
} else {
alert("Passwords do not match");
}
}
},
},
};
</script>
<style></style>
I tried to turn off cosr from crome extension
The error you're encountering is due to a typo in your code. The correct function to handle errors in axios is .catch()
rather than .error()
.
Example:
axios.get(`http://localhost:6969/sendmail/${this.dt.userEmail}`)
.then((response)=>console.log(response))
.catch((error)=>console.log(error));
If you are wondering why it is working despite the error, it's because your request goes through and you receive a successful response, which leads you to the .then()
statement, yet you still get the error.