I am supposed to fetch some user data from a website. I had no problem retrieving the data from Postman, but when I tried to do this with Vue.JS, here we go.
Here is my Users.vue file.
<template>
<div id="app">
<div>
<img src="../Images/imageedit_1_2384739357.png" height=200 width=200 />
<p>Created by Master PC.</p>
</div>
<hr />
<!--Get the user input here.-->
<div>
<form @submit="postData" method="post">
Email Address: <input type="text" name="userName" v-model="users.mail" /><br /><br />
Password: <input type="password" name="password" v-model="users.password" /><br /><br />
<button type="submit">Post</button>
</form>
</div>
<!-- Final Status-->
<!-- Credits -->
<hr />
<div>
<p>Copyright (C) 2021-2022 - Master-PC.</p>
<img src='../Images/vlcsnap-2021-06-29-16h05m13s983.png' width="300" height="200" />
</div>
<hr />
</div>
</template>
<script>
import axios from 'axios'
import VueAxios from 'vue-axios'
import Vue from 'vue'
Vue.use(VueAxios, axios)
export default {
name: "Users",
data() {
return {
users: {
mail: null,
password: null
}
}
},
methods: {
postData(e) {
this.axios.post("[domain name here].com/mail/login", this.users)
.then((result) => {
console.warn(result)
})
e.preventDefault();
}
}
}
</script>
I expected the results to come out beautifully, like this:
{
"sysCode": 1000,
"sysMsg": "",
"data": {
"userToken": ----------------------------,
"isValidated": true,
"birthday": ---------,
"gender": male,
"lastName": ----,
"firstName": "------",
"mail": "----------14@gmail.com"
}
}
Upon entering the user email and password, which is mine, I get this error:
Access to XMLHttpRequest at '[domain name here].com/mail/login' from origin 'http://localhost:1337' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
What I have tried:
I do not know how to fix this problem here, as I am new to working with APIs with Vue.JS.
I followed this video here:
Vue js tutorial for beginners #24 Post API with form data - YouTube[
^]