Laravel 419 error on POST request via axios React

Question

I'm trying to send a POST request to my API which is running Laravel 7.

My route is as follows:

Route::get('/data', 'CartographieController@dataToJson');
Route::post('/addDraft', 'CartographieController@addDraft');

this is my post function in controller:

public function addDraft(Request $request)
{
    $draft = Draft::create($request->all());
    return response()->json($draft, 201);
}

I send the from React form here is:

handleAdd(event) {
event.preventDefault();

var draft = {
  description: this.state.description,
};

try {
  const nextData = clone(this.state);
  nextData.drafts.push(draft);
  //console.log("state" + this.state);
  this.setState({ drafts: nextData.drafts });
  console.log("state" + this.state);
} catch (error) {
  console.log(error);
}

axios
  .post("http://127.0.0.1:8000/addDraft/", this.state.drafts)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

As a response to the request I get: Request failed with status code 419

Answer 1

when it 419 mostly because you dont sent the csrf_token on the headers, do you?

put this on the head your html document

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

and add headers x-csrf-token to your ajax

headers: {
    'x-csrf-token': document.querySelector("[name="csrf-token]").getAttribute('content')
}

Answer 2

Hi 419 is unproccesble entity error, better you can catch this error and display as exception error