i'm new learn vue js, i want to send data API from vue JS to Backend Laravel. Data already sent to backend and already saved to database. But when i'm check console after send parameter, then vue js redirect to catch not response.
And this error in console => Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:2000/register/store. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
I don't know, why parameter has been received in backend and success, but vue js not redirect to response. So it doesn't display alert message :(
This respond from backend laravel :
{"message":"Success!","status":"200","value":"{\"nama\":\"test\",\"email\":\"test@gmail.com\",\"password\":\"123\",\"updated_at\":\"2020-05-07T05:50:41.000000Z\",\"created_at\":\"2020-05-07T05:50:41.000000Z\",\"id\":48}"}
And this my code
<template>
<div id="app">
<img alt="Vue logo" style="width:100px;height:100px" src="./assets/logo.png"><br/><br/>
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2">
<div class="card">
<div class="card-body">
<h5 class="card-title">Sign Up Form</h5>
<h6 class="card-subtitle mb-2 text-muted">Let's join our web today.</h6>
<div v-if="loading == true">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<form v-else v-on:submit="submitSignUp" class="text-left">
<div class="form-group">
<label for="exampleInputFullname">Full name</label>
<input type="text" class="form-control" id="exampleInputFullname" v-model="fullnameForm" placeholder="Enter Full name">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" v-model="emailForm" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" v-model="passwordForm" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'app',
data() {
return {
responseAPI: '',
loading: false,
fullnameForm: '',
emailForm: '',
passwordForm: ''
}
},
methods: {
submitSignUp(params) {
this.loading = true;
var optionAxios = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}
const formData = new FormData();
formData.append('name', this.fullnameForm);
formData.append('email', this.emailForm);
formData.append('password', this.passwordForm);
axios.post('http://localhost:2000/register/store',formData,optionAxios)
.then(response => {
this.responseAPI = response;
//why not display this alert
if(response.status == 200) {
alert('form success');
} else {
alert('form failed');
}
})
.catch(error => {
console.log(error);
this.errored = error;
})
.finally(() => {
this.loading = false
this.fullnameForm = '',
this.passwordForm = '',
this.emailForm = ''
})
params.preventDefault();
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
