Vue js Laravel axios POST 500 内部服务器错误答案

【问题标题】：Vue js Laravel axios POST 500 Internal Server ErrorVue js Laravel axios POST 500 内部服务器错误
【发布时间】：2020-05-09 10:05:43
【问题描述】：

我刚刚使用 Axios 为调用 API 创建了 laravel Vuejs 项目。 Get Api 运行良好，但是当我要发布我的数据时，出现内部服务器错误。我正在为控制器使用资源。我只是创建 Api 并通过以下方式获取数据：

axios.get("http://localhost:8080/vuelaravel/tasks")
         .then(response =>{this.tasks = response.data})
         .catch(error => console.log(error.response));

vuelaravel 是我的项目名称。它运作良好。但是当我尝试将数据发布到我的数据库中时，它会显示 500 内部错误。

Here is my controller:
<?php

namespace App\Http\Controllers;

use App\Todo;
use Illuminate\Http\Request;
use Illuminate\Http\Response;

class TodoController extends Controller
{

    public function index()
    {

        $tasks=Todo::orderBy('id', 'desc')->paginate(2);
        return request()->json(200,$tasks);
    }

    public function create()
    {
        //
    }

    public function store(Request $request)
    {
        $todo=Todo::create($request->all());

        if($todo){
            $tasks=Todo::orderBy('id', 'desc')->paginate(2);
            return request()->json(200,$tasks);
        }

    }

    public function show(Todo $todo)
    {
        //
    }

    public function edit(Todo $todo)
    {
        //
    }


    public function update(Request $request, Todo $todo)
    {
        //
    }


    public function destroy(Todo $todo)
    {
        //
    }
}

还有我的 ADD.Vue

<template>
<div>


    <div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <input type="text" name="name" v-model="name" id="name" placeholder="Title Name" class="form-control" >
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" @click="addRecord">Save changes</button>
            </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    data(){
        return{
            name:'',

        }
    },
    methods:{
        addRecord(){
            axios.post("http://localhost:8080/vuelaravel/tasks",{
                'name': this.name,
            })
            .then(data => console.log(data))
            .catch(error => console.log(error))

        }
    }

}
</script>
<style scoped>

</style>

这是错误：

app.js:285 POST http://localhost:8080/vuelaravel/tasks 500 (Internal Server Error)

    at createError (app.js:699)
    at settle (app.js:960)
    at XMLHttpRequest.handleLoad (app.js:168)

我在 Welcome.blade.php 中使用我的 csrf

        <meta name="csrf-token" content="{{csrf_token()}}">

通过这个 Api 获取我的数据：

    created(){

         axios.get("http://localhost:8080/vuelaravel/tasks")
         .then(response =>{this.tasks = response.data})
         .catch(error => console.log(error.response));
    }

【问题讨论】：

检查您的网络选项卡并查看错误
你确定axios中的url正确吗？你能在“catch()”console.log(error.response) 中显示更多细节吗？
localhost:8080/vuelaravel/tasks 是获取和发布的用户。获取有效，但发布无效。
你已经批量分配了你的待办事项模型吗？
我在我的 Todo 模型中没有什么可分配的。只需创建一个模型。

标签： laravel vue.js laravel-6 http-status-code-500

【解决方案1】：

试试这个

response($tasks)方法

 $tasks=Todo::orderBy('id', 'desc')->paginate(2);
 return response($tasks);

【讨论】：

【解决方案2】：

由于您在模型中使用了 create 方法，因此请确保通过将这段代码放在模型中，您已在模型中分配了质量。

protected $guarded = [];

请阅读此文档soruce

【讨论】：

谢谢兄弟，你太棒了。这就是问题解决者之间的区别。