触发submitForm时出现AxiosError 500错误，求解决方案

问题描述 #

调用submitForm方法时触发500 Internal Server Error，报错信息：

500 (Internal Server Error)
{message: 'Request failed with status code 500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {…}, request: XMLHttpRequest, …}

相关代码 #

AJAX请求代码 #

$.ajaxSetup({
    headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
$.ajax({
    url: _this.apiUrl,
    method: 'GET',
    success: function(data) {
        _this.libary = JSON.parse(data);
    },
    error: function(error) {
        console.log(error);
    }
});

submitForm方法代码 #

submitForm(event, id) {
    event.preventDefault();
    const _this = this;
    var actionUrl = ! this.editStatus ? this.actionUrl : this.actionUrl+'/'+id;
    axios.post(actionUrl, new FormData($(event.target)[0])).then(response => {
        $('#modal-default').modal('hide');
        _this.table.ajax.reload();
    });
}

解决思路 #

1. 补充Axios的CSRF令牌
   你的jQuery AJAX全局配置了CSRF令牌，但Axios请求未添加，后端会因验证失败返回500。给Axios请求添加头部：

   axios.post(actionUrl, new FormData($(event.target)[0]), {
       headers: {
           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
           'Content-Type': 'multipart/form-data' // 表单包含文件上传时需添加
       }
   })
   

2. 检查请求方法是否匹配后端路由
   编辑状态下，后端通常用PUT/PATCH方法处理更新请求，而非POST。如果后端路由定义的是PUT，修改请求方法：

   const method = this.editStatus ? 'put' : 'post';
   axios[method](actionUrl, new FormData($(event.target)[0]), {
       headers: {
           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
       }
   })
   

3. 验证FormData数据合法性
   表单字段可能不符合后端要求，比如必填项为空、字段类型错误。可以在请求前打印FormData内容排查：

   const formData = new FormData($(event.target)[0]);
   Array.from(formData.entries()).forEach(([key, val]) => console.log(key, val));
   

4. 查看后端错误日志
   500错误本质是后端代码抛出异常，比如数据库操作失败、参数解析错误等。直接查看服务器端的错误日志，能最快定位具体问题。

内容的提问来源于stack exchange，提问作者S13Luke