[Vuejs]-Fetch HTTP Post Vue Data in Laravel API

by

0👍

✅

Solved the issue. Was such a noob mistake it’s embarrassing. I was missing the following in my controller.

use Illuminate\Http\Request;

0👍

If you POST’ing to Laravel you need to specify CSRF token in request.

Add to your <head>:

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

And set default X-CSRF-TOKEN for axios:

axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

0👍

If you POST to Laravel you need to specify CSRF token in request.

Add to your :

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

First you should add following line in app.js

axios.defaults.headers.common = {
'X-Requested-With': 'XMLHttpRequest',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf- 
token"]').getAttribute('content')
};

const config = { headers: { 'Content-Type': 'multipart/form-data' } };  
 axios.post('/admin/theme/',{name: "yourname"},config).then(response=>{
 if(response.data.success === true){

 }).catch((error) => {

 });

i hope it’s help for you.

0👍

As i can’t see what error are you getting, my best guest is this

The errors is because you’re trying to get the data like this return $request->firstName;, but in the image you shown you’re sending 

{
    params : {
        firstName : 'Dally'
    }
}

Try getting params first then returning what you want like 

public function vueData(Request $request)
{
    $data = $request->input('params');
    return $data->firstName;
    //if this fails, maybe params contains a array so do
    //return $data['firstName'];
}

Leave a comment