POST http://127.0.0.1:8000/api/customers 422 (необработанный объект)

Question

Я использую Laravel 6.2 и 2.5.17. Когда я отправляю новый ответ без тела, я получаю ошибку 422 (Unprocessable Entity) https://prnt.sc/psceiw

Как ее решить?

Мой API-контроллер:

<?php
    public function store(Request $request)
    {
        $this->validate($request, [
            'name' => 'required',
            'email' => 'required|email|unique:customers',
            'phone' => 'required|numeric',
            'address' => 'required',
            'total' => 'required|numeric'
        ]);

        $customer = new Customer();
        $customer->name = $request->name;
        $customer->email = $request->email;
        $customer->phone = $request->phone;
        $customer->address = $request->address;
        $customer->total = $request->total;
        $customer->save();                      //save data 
        return new CustomerResource($customer);     // save and return
    }    
?>

Мой Main.js:

import PaginationComponent from './components/partial/PaginationComponent.vue'
import Vue from 'vue'
import VueProgressBar from 'vue-progressbar'
import Snotify, { SnotifyPosition } from 'vue-snotify'  // Import Snotify
import { Form, HasError, AlertError } from 'vform'   // Import vform

//  show window form                                                   
window.Vue = require('vue');
window.Form = Form

const SnotifyOptions = {
    toast: {
        position: SnotifyPosition.rightTop
    }
}

Vue.use(Snotify, SnotifyOptions);

const VueProgressBarOptions = {
    color: '#50d37a',
    failedColor: '#874b4b',
    thickness: '5px',
    transition: {
        speed: '0.2s',
        opacity: '0.6s',
        termination: 300
    },
    autoRevert: true,
    location: 'top',
    inverse: false
}

Vue.use(VueProgressBar, VueProgressBarOptions)

Vue.component('customer-component', require('./components/CustomerComponent.vue').default)

Vue.component('pagination', PaginationComponent)

// vform
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)

const app = new Vue({
    el: '#app',
});

// And componentsVue.vue: 
<script>
    export default {
        data(){
            return{
                query: '',
                queryFeild: 'name',
                customers: [],
                form : new Form({
                    id : '',
                    name: '',
                    email: '',
                    phone: '',
                    address: '',
                    total: '',
                }),
                pagination:{
                    current_page: 1,
                }
            }
        },
        watch: {
            query:function (newQ, old) {
                if (newQ === '') {
                    this.getData();
                }
                else{
                    // console.log(newQ) // to check saerch data
                    this.searchData()
                }
            }
        },
        mounted() {
            console.log('Component mounted.')
            this.getData();
        },
        methods: {
            getData(){  
                this.$Progress.start()
                axios.get('/api/customers?page='+this.pagination.current_page)
                .then(response =>  {
                    this.customers = response.data.data
                    this.pagination = response.data.meta
                    this.$Progress.finish()
                })
                .catch(e => {
                    console.log(e)
                    this.$Progress.fail()
                })
            },
            searchData(){
                this.$Progress.start()
                axios.get('/api/search/customers/'+this.queryFeild+'/'+this.query+'?page='+this.pagination.current_page)
                .then(response => {
                    this.customers = response.data.data
                    this.pagination = response.data.meta
                    this.$Progress.finish()
                })
                .catch(e => {
                    console.log(e)
                    this.$Progress.fail()
                })
            },
            reload(){
                this.getData()
                this.query = ''
                this.queryFeild = 'name'
                this.$snotify.success('Data Successfully Refresh','Success')
            },
            create(){    // show modal to add customer
                this.form.reset()
                this.form.clear()
                $('#customerModal').modal('show')
            },
            store(){   // data store/insert to add customer
                this.$Progress.start()
                this.form.busy = true
                this.form.post('/api/customers')
                .then(response => {
                    this.getData()
                    $('#customerModal').modal('hide')
                    if (this.form.successful) 
                    {
                        this.$Progress.finish()
                        this.$snotify.success('Customer Successfully Saved','Success')
                    }
                    else
                    {
                        this.$Progress.fail()
                        this.snotify.error("Ops! Something went wrong try again leter", "Error")
                    }
                })
                .catch(error => {
                    this.$Progress.fail()
                    if(error.code == 422){
                        console.log(error.data)
                    }
                    // console.log(e)
                })
            }
        }
    }
</script>