Fetch HTTP Post Vue Data in Laravel API

Question

I'm having a really tough time fetching HTTP Post data sent from Vue, in my Laravel API.

What I have is extremely simple.

axios({
    method: 'post',
    url: 'http://localhost:8888/api/vue-data',
    data: { firstName: "Dally" },
    config: { headers: { 'Content-Type': 'multipart/form-data' }}
    })
    .then(response => {
        console.log(response.data)
    })
    .catch(e => {
        this.errors.push(e)
})

And then the function in my Laravel controller is this...

public function vueData(Request $request)
{
    return $request->firstName;
}

The data is being sent as I can see it in Chrome Dev tools but why can't I fetch it in Laravel?

I've tried vue-resource as opposed to Axios but still no luck.

UPDATE #1

So when I use Axios I get the following error.

And when I use vue-resource I get this.

Data is passing...

UPDATE #2

If I change the Laravel controller code to this, I get a response in VueJS. Seems like the controller function in Laravel isn't receiving the Vue data or that I'm accessing it wrong.

public function vueData(Request $request)
{
    return "Testing";
}

What about debugging on $request->all() then figure out if there's data keyed firstName there? — Chay22
– Chay22, Commented Aug 22, 2018 at 11:50
but why can't I fetch it in Laravel? Well, what's happening? Do you get an error? — Devon Bessemer
– Devon Bessemer, Commented Aug 22, 2018 at 11:50
You need to send FormData object since you are setting 'multipart/form-data' — charlietfl
– charlietfl, Commented Aug 22, 2018 at 11:52

Daniel · Accepted Answer · 2018-08-22 11:52:53Z

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');

answered Aug 22, 2018 at 11:52

Daniel

2,7772 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dally Over a year ago

You only need to do that if your using web.php for routing mate. I'm using api.php so I don't think that's the issue.

Mokariya Sanjay · Accepted Answer · 2018-08-22 12:30:04Z

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.

answered Aug 22, 2018 at 12:30

Mokariya Sanjay

1943 silver badges13 bronze badges

1 Comment

Dally Over a year ago

You only need to do that if your using web.php for routing mate. I'm using api.php so I don't think that's the issue.

Carlos Salazar · Accepted Answer · 2018-08-22 15:50:59Z

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'];
}

answered Aug 22, 2018 at 15:50

Carlos Salazar

1,9186 gold badges29 silver badges49 bronze badges

Comments

Dally · Accepted Answer · 2018-08-23 08:47:05Z

0

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

use Illuminate\Http\Request;

answered Aug 23, 2018 at 8:47

Dally

1,4876 gold badges23 silver badges56 bronze badges

Collectives™ on Stack Overflow

Fetch HTTP Post Vue Data in Laravel API

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related