Я новичок vue js, я хочу отправить API данных с vue JS на Backend Laravel. Данные уже отправлены в серверную часть и уже сохранены в базе данных. Но когда я проверяю консоль после параметра отправки, тогда vue js перенаправляет на catch not response .
И эта ошибка в консоли => Запрос на кросс-источник заблокирован: та же политика происхождения запрещает чтение удаленного ресурса по адресу http://localhost: 2000 / register / store . (Причина: отсутствует заголовок CORS 'Access-Control-Allow-Origin').
Не знаю, почему параметр имеет был получен в бэкэнде и успешно, но vue js не перенаправляет на ответ . Поэтому он не отображает предупреждающее сообщение: (
Этот ответ от бэкэнда 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}"}
И это мой код
<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>