从Vue表单Laravel保存数据时出现500个内部服务器错误

如何解决从Vue表单Laravel保存数据时出现500个内部服务器错误

当我单击按钮以保存表单中的数据时，出现错误500内部服务器错误，这是因为我使用了laravel后端，其中我编写了将表单中的数据保存到数据库的功能

<template>
<form>
          <div>
    <input  type="text" v-model="contact.first_name" placeholder="Enter first name">
    </div>
    ...
    </div>
</template>

<script>
    export default {
        data(){
            return{
                contact:{},}
        },methods: {
            createContact(contact) {
                this.$store.dispatch('createContact',this.contact);
                this.contact = '';
                alert('A contact has been added!')
            }
        },}
</script>

这是我的store.js

import Vue from "vue";
import Vuex from "vuex";
import axios from 'axios'


Vue.use(Vuex);
export default new Vuex.Store({
    state: {
       contacts: [],},mutations: {
        CREATE_CONTACT(state,contact) {
            state.contacts.unshift(contact)
        },actions: {
        createContact({commit},contact) {
            console.log(contact);
            axios.post('/api/contacts',contact)
                .then(res => {
                    console.log(res);
                    commit('CREATE_CONTACT',res.data)
                }).catch(err => {
                console.log(err)
            })
        },}


});import Vue from "vue";
import Vuex from "vuex";
import axios from 'axios'


Vue.use(Vuex);
export default new Vuex.Store({
    state: {
       contacts: [],}

}）;

这是我的控制器，在其中编写了函数存储，其中包含将数据存储在数据库中的功能 公共功能存储（请求$ request） {

    $contact = Contact::create($request->all());
    
  
    return response()->json(['result'=>$contact]);
    
}