title: POST http://127.0.0.1:8000/ 422 (Unprocessable Content)
body: <p>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 <a href="http://127.0.0.1:8000/" rel="nofollow noreferrer">http://127.0.0.1:8000/</a> 422 (Unprocessable Entity)).</p>
  <pre><code>&lt;template&gt;
              &lt;div class=&quot;back-img&quot; :style=&quot;`background-image: url('${appUrl}/images/background/default-background.jpg')`&quot;&gt;
                  &lt;div class=&quot;container-fluid&quot;&gt;
                      &lt;div class=&quot;row&quot;&gt;
                          &lt;div class=&quot;col-12 col-md-6 offset-md-6 col-lg-4 offset-lg-8 col-xl-4 offset-xl-8 pl-0&quot;&gt;
                              &lt;div class=&quot;sign-in-sign-up-content&quot;&gt;
                                  &lt;form class=&quot;sign-in-sign-up-form&quot;&gt;
                                      &lt;div class=&quot;text-center mb-4 application-logo&quot;&gt;
                                          &lt;img :src=&quot;publicPath+'/uploads/logo/'+appLogo&quot; alt=&quot;&quot; class=&quot;img-fluid logo&quot;&gt;
                                      &lt;/div&gt;
                                      &lt;div class=&quot;form-row&quot;&gt;
                                          &lt;div class=&quot;form-group col-12&quot;&gt;
                                              &lt;h3 class=&quot;text-center mb-0&quot;&gt;
                                                  {{ trans('lang.hi_there') }}
                                              &lt;/h3&gt;&lt;br&gt;
                                              &lt;label class=&quot;text-center d-block&quot;&gt;
                                                  {{ trans('lang.sign_in_to_your_dashboard') }}
                                              &lt;/label&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div v-if=&quot;alertMessage.length&gt;0&quot; class=&quot;alertBranch&quot;&gt;
                                          &lt;div class=&quot;alert alert-warning alertBranch&quot; role=&quot;alert&quot;&gt;
                                              {{alertMessage}}
                                          &lt;/div&gt;
                                      &lt;/div&gt;&lt;br&gt;
                                      &lt;div class=&quot;form-row&quot;&gt;
                                          &lt;div class=&quot;form-group col-12&quot;&gt;
                                              &lt;label for=&quot;username&quot; style=&quot;font-size: 20px;&quot;&gt; {{ trans('lang.login_username') }}&lt;/label&gt;
                                              &lt;input id=&quot;username&quot;
                                                     v-validate=&quot;'required'&quot;
                                                     v-model=&quot;username&quot;
                                                     type=&quot;text&quot;
                                                     name=&quot;username&quot;
                                                     class=&quot;form-control&quot;
                                                     :placeholder=&quot;trans('lang.enter_username')&quot;
                                                     :class=&quot;{ 'is-invalid': submitted &amp;&amp; errors.has('username') }&quot;&gt;
                                              &lt;div class=&quot;heightError&quot; v-if=&quot;submitted &amp;&amp; errors.has('username')&quot;&gt;
                                                  &lt;small class=&quot;text-danger&quot; v-show=&quot;errors.has('username')&quot;&gt;
                                                      {{ errors.first('username') }}
                                                  &lt;/small&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div class=&quot;form-row&quot;&gt;
                                          &lt;div class=&quot;form-group col-12&quot;&gt;
                                              &lt;label for=&quot;password&quot; style=&quot;font-size: 20px !important;&quot;&gt;{{ trans('lang.login_password') }}&lt;/label&gt;
                                              &lt;input id=&quot;password&quot;
                                                     v-validate=&quot;'required'&quot;
                                                     ref=&quot;password&quot;
                                                     v-model=&quot;password&quot;
                                                     name=&quot;password&quot;
                                                     type=&quot;password&quot;
                                                     class=&quot;form-control&quot;
                                                     :placeholder=&quot;trans('lang.enter_password')&quot;
                                                     :class=&quot;{ 'is-invalid': submitted &amp;&amp; errors.has('password') }&quot;&gt;
                                              &lt;div class=&quot;heightError&quot;&gt;
                                                  &lt;small class=&quot;text-danger&quot; v-show=&quot;errors.has('password')&quot;&gt;
                                                      {{ errors.first('password') }}
                                                  &lt;/small&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div class=&quot;form-row loginButton&quot;&gt;
                                          &lt;div class=&quot;form-group col-12&quot;&gt;
                                              &lt;common-submit-button class=&quot;btn-block text-center auth-button&quot;
                                                                    style=&quot;font-size: 20px !important;&quot;
                                                                    :buttonLoader=&quot;buttonLoader&quot;
                                                                    :isDisabled=&quot;isDisabled&quot;
                                                                    :isActiveText=&quot;isActiveText&quot;
                                                                    buttonText=&quot;login&quot;
                                                                    v-on:submit=&quot;loginPost&quot;/&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;!-- &lt;div class=&quot;form-row&quot;&gt;
                                          &lt;div class=&quot;form-group col-12&quot;&gt;
                                              &lt;a href=&quot;#&quot;
                                                 @click=&quot;forgetPassword&quot;
                                                 class=&quot;bluish-text&quot;&gt;
                                                  &lt;i class=&quot;fa fa-lock&quot;/&gt;
                                                  {{ trans('lang.forgot_password') }}
                                              &lt;/a&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt; --&gt;
                                  &lt;/form&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/template&gt;
  
  &lt;script&gt;
  
      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) =&gt; {
                          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(&quot;/sales&quot;);
              },
              loginPostError(response) {
                  let instance = this;
                  instance.buttonLoader = false;
                  instance.isDisabled = false;
                  instance.isActiveText = false;
                  instance.alertMessage = response.data.errors.username[0];
              },
          }
      }
  &lt;/script&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/CUohf.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CUohf.jpg" alt="enter image description here" /></a></p>
  <p>File: resources\assets\js\js\bootstrap.js</p>
  <pre><code>    window._ = require('lodash');
      window.Popper = require('popper.js').default;
      import axios from &quot;axios&quot;;
      
      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=&quot;csrf-token&quot;]')) {
          window.axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name=&quot;csrf-token&quot;]').getAttribute('content');
      }
  </code></pre>