Fetch API returns 500 (Internal Server Error)

Question

I got a function to send data to my backend but when I'm saving to the database I'm getting this error in my console log:

POST http://127.0.0.1:8000/api/widgets 500 (Internal Server Error)

This is my function:

function saveToDatabase(key, value) {

    /* Layout object array */
    var layoutArray = JSON.stringify(_defineProperty({}, key, value));

    /*Fetch API for post request */
    fetch('api/widgets', {
        method: 'post',
        /* headers are important*/
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

        },

        body: layoutArray
    }).then(function (response) {
        console.log(response.json());
    });
}

This bit of code is underlined in my console:

fetch('api/widgets', {

And when I hover over the error it says:

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

But the route should work this is the route in api.php:

Route::post('widgets', 'WidgetsController@store');

WidgetController:

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

    return response()->json($widget, 201);

}

Can anyone tell me what is causing the error because the route seems good to me.

Fetch API returns 500 (Internal Server Error)

0 Answers0