POST http://127.0.0.1:8000/ 422 (Unprocessable Content) - laravel

Question

I have an error on login form after upgrading version Vue JS, Axios, Laravel.
This project code working well with old version. Anyone can explain this serious errors.
Thanks you for your help!
And I stuck with it many days. I've search for similar post error, but only seen this(POST http://127.0.0.1:8000/ 422 (Unprocessable Entity)).
<template>
<div class="back-img" :style="`background-image: url('${appUrl}/images/background/default-background.jpg')`">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-6 offset-md-6 col-lg-4 offset-lg-8 col-xl-4 offset-xl-8 pl-0">
<div class="sign-in-sign-up-content">
<form class="sign-in-sign-up-form">
<div class="text-center mb-4 application-logo">
<img :src="publicPath+'/uploads/logo/'+appLogo" alt="" class="img-fluid logo">
</div>
<div class="form-row">
<div class="form-group col-12">
<h3 class="text-center mb-0">
{{ trans('lang.hi_there') }}
</h3><br>
<label class="text-center d-block">
{{ trans('lang.sign_in_to_your_dashboard') }}
</label>
</div>
</div>
<div v-if="alertMessage.length>0" class="alertBranch">
<div class="alert alert-warning alertBranch" role="alert">
{{alertMessage}}
</div>
</div><br>
<div class="form-row">
<div class="form-group col-12">
<label for="username" style="font-size: 20px;"> {{ trans('lang.login_username') }}</label>
<input id="username"
v-validate="'required'"
v-model="username"
type="text"
name="username"
class="form-control"
:placeholder="trans('lang.enter_username')"
:class="{ 'is-invalid': submitted && errors.has('username') }">
<div class="heightError" v-if="submitted && errors.has('username')">
<small class="text-danger" v-show="errors.has('username')">
{{ errors.first('username') }}
</small>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-12">
<label for="password" style="font-size: 20px !important;">{{ trans('lang.login_password') }}</label>
<input id="password"
v-validate="'required'"
ref="password"
v-model="password"
name="password"
type="password"
class="form-control"
:placeholder="trans('lang.enter_password')"
:class="{ 'is-invalid': submitted && errors.has('password') }">
<div class="heightError">
<small class="text-danger" v-show="errors.has('password')">
{{ errors.first('password') }}
</small>
</div>
</div>
</div>
<div class="form-row loginButton">
<div class="form-group col-12">
<common-submit-button class="btn-block text-center auth-button"
style="font-size: 20px !important;"
:buttonLoader="buttonLoader"
:isDisabled="isDisabled"
:isActiveText="isActiveText"
buttonText="login"
v-on:submit="loginPost"/>
</div>
</div>
<!-- <div class="form-row">
<div class="form-group col-12">
<a href="#"
#click="forgetPassword"
class="bluish-text">
<i class="fa fa-lock"/>
{{ trans('lang.forgot_password') }}
</a>
</div>
</div> -->
</form>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axiosGetPost from '../../helper/axiosGetPostCommon';
export default {
extends: axiosGetPost,
props: ['checkusername', 'checkpass'],
data() {
return {
username: this.checkusername,
name: '',
password: this.checkpass,
remember: true,
buttonLoader: false,
isActiveText: false,
isDisabled: false,
preLoaderType: 'load',
hidePreLoader: false,
isActive: 'active',
alertMessage: '',
submitted: false,
}
},
methods: {
loginPost() {
this.submitted = true,
this.$validator.validateAll().then((result) => {
if (result) {
this.inputFields = {
username: this.username,
password: this.password,
};
this.buttonLoader = true;
this.isDisabled = true;
this.isActiveText = true;
this.loginPostMethod('/', {
username: this.username,
password: this.password,
}
);
}
});
},
forgetPassword() {
let instance = this;
instance.redirect('/password/reset');
},
loginPostSucces(response) {
let instance = this;
instance.redirect("/sales");
},
loginPostError(response) {
let instance = this;
instance.buttonLoader = false;
instance.isDisabled = false;
instance.isActiveText = false;
instance.alertMessage = response.data.errors.username[0];
},
}
}
</script>
File: resources\assets\js\js\bootstrap.js
window._ = require('lodash');
window.Popper = require('popper.js').default;
import axios from "axios";
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
if (document.querySelector('meta[name="csrf-token"]')) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
}

Answer 1

You have to pass the csrf token in Ajax request.
data: {
"_token": "{{ csrf_token() }}",
other form data
}
OR
You can create csrf token in header using meta element and access that value in while sending ajax request.
<meta name="csrf-token" content="{{ csrf_token() }}" />
// Access in ajax request like below
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
Laravel + Vue + Axios
Laravel has configurd the default token header in resources/js/bootstrap.js
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
So you have to just import axios like.
import axios from 'axios';