Register component doesn't insert data. Throws new MethodNotAllowedHttpException($others); - laravel

Question

I'm trying to post user register data to my db using axios.post from Register.vue component. but this gives me an error. I don't know if the error is on the form or on the inputs.
This is my Register.vue
<template>
<div class="login-wrapper border border-light">
<form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
<h2 class="form-signin-heading">Please sign in</h2>
<div class="form-group">
<label for="usuario" class="sr-only">Username</label>
<input v-model="usuario" type="usuario" id="inputEmail" class="form-control" placeholder="Username" required autofocus>
<label for="inputEmail" class="sr-only">Email </label>
<input v-model="email" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input v-model="password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<button class="btn btn-primary" #click="registrarUsuario()">Register</button>
</div>
</form>
</div>
</template>
<script>
export default {
data () {
return {
usuario: '',
email: '',
password: '',
errorPersona : 0,
errorMostrarMsjPersona : [],
}
},
methods: {
registrarUsuario(){
console.log(this.email);
if (this.validarUsuario()){
return;
}
let me = this;
axios.post('/user/registrar',{
'email' : this.email,
'usuario': this.usuario,
'password': this.password
}).then(function (response) {
console.log("3");
}).catch(function (error) {
console.log("4");
console.log(error);
});
},
validarUsuario(){
console.log("2");
this.errorPersona=0;
this.errorMostrarMsjPersona =[];
if (!this.email) this.errorMostrarMsjPersona.push("El correo de usuario no puede estar vacío.");
if (!this.usuario) this.errorMostrarMsjPersona.push("El nombre de usuario no puede estar vacío.");
if (!this.password) this.errorMostrarMsjPersona.push("El password no puede estar vacío.");
if (this.errorMostrarMsjPersona.length) this.errorPersona = 1;
return this.errorPersona;
},
}
}
</script>
This is my UserController.php
public function store(Request $request)
{
if (!$request->ajax()) return redirect('/');
DB::beginTransaction();
$usuario = new User();
$usuario-> usuario = $request->usuario;
$usuario-> password = bcrypt($request->password);
$usuario-> condicion = 1;
$usuario->save();
console.log('end');
DB::commit();
}
This is my web.php
Route::get('/main', function () {
return view('contenido/contenido');
})->name('main');
//Route::resource('proyecto', 'ProyectoController', ['except' => 'show']);
Route::get('/user', 'UserController#index');
Route::post('/user/registrar', 'UserController#store');
Route::put('/user/actualizar', 'UserController#update');
Route::put('/user/desactivar', 'UserController#desactivar');
Route::put('/user/activar', 'UserController#activar');
Route::get('/register','Auth\RegisterController#showRegisterForm');

Answer 1

You must need csrf token or disable it.
First for disable
Http/Middleware/VerifyCsrfToken.php
protected $except = [
'/user/registrar'
];
Second for send with csrf your ftemplate
<template>
<div class="login-wrapper border border-light">
<form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
{{ csrf_field() }}
<h2 class="form-signin-heading">Please sign in</h2>
<div class="form-group">
<label for="usuario" class="sr-only">Username</label>
<input v-model="usuario" type="usuario" id="inputEmail" class="form-control" placeholder="Username" required autofocus>
<label for="inputEmail" class="sr-only">Email </label>
<input v-model="email" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input v-model="password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<button class="btn btn-primary" #click="registrarUsuario()">Register</button>
</div>
</form>
</div>
</template>
UPDATE
You can get csrf token from app.blade.php
var csrfToken = $('meta[name="csrf-token"]').attr('content');
Then update your axios.post request
axios.post('/user/registrar',{
'email' : this.email,
'usuario': this.usuario,
'password': this.password
},headers: {
'X-Requested-With': 'XMLHttpRequest',
'X-CSRFToken': csrfToken,
}).then(function (response) {
console.log("3");
}).catch(function (error) {
console.log("4");
console.log(error);
});