How to get JSON in Laravel from vue.js axios POST?

Question

I have some problem with receiving JSON data from vuex with axios in my Laravel Backend.

I have vuex store like this, and I want to send it to backend on click.

 order: {
        delivery_id: null,
        user_id: null,
        is_active: true,
        bill: null,
        name: null,
        surname: null,
        father_name: null,
        phone: null,
        payment_type: 'cash',
        delay: null,
        cashback_paid: null,
        card: null,
        payment_screenshot: null,
        cart: null,
    }

In vue component I have this method:

sendOrder() {
  let order = this.$store.state.order.order;
  console.log(order)

  axios
    .post('/api/products', order, {
      header: {
        'Content-Type': 'application/json'
      }
    })
    .then((response) => {
      console.log(response);
    })
    .catch((error) => {
      console.log(error);
    })
}

And this is my pretty simple Laravel Controller:

$test = json_decode($request->getContent(), true);

$test = $test['payment_type'];

return response($test);

But when I'm doing this POST request, I'm receiving empty data in response.

Also, I've tried to check my API with Postman, and it's working fine. I just send request, then go to F12 > Network > find my request and copy Request Payload source data. Then I've pasted it into Postman body (raw, json) and make request with this data to same url (http://localhost:8000/api/orders), and its return 'cash' as expected. So I decided, that it's vue.js or axios problem, but I have no idea how to fix that. Thank you!

UPDATED I already have tried to remove Content-Type from axios, JSON.stringify order and had the same result - empty data on response.

biberman · Accepted Answer · 2021-03-21 17:09:03Z

0

I think, before you use order in axios you should stringify the JSON data:

let order = JSON.stringify(this.$store.state.order.order);

Second part of the answer after some comments:

Are you sure about the routes file? I would call the controller from the web.php file (same folder) with a declared function (for example mytest), like this:

Route::post('/api/products', 'ProductController@mytest');

and put your controller logic in that function:

public function mytest()
{
    $test = json_decode($request->getContent(), true);
    $test = $test['payment_type'];
    return response($test);
}

If that doesn't work (also in combination with JSON.stringify), my only idea is a typo in your "pretty simple Laravel Controller" ;)...

edited Mar 21, 2021 at 17:09

answered Mar 20, 2021 at 10:59

biberman

5,7794 gold badges16 silver badges39 bronze badges

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

4 Comments

Nazarii Semeniuk Over a year ago

Thanks fot rour reply. I already tried this, but had the same result. I edit my question and add an update - "UPDATED I already have tried to remove Content-Type from axios, JSON.stringify order and had the same result - empty data on response."

biberman Over a year ago

What does your console.log(order) spit out? And what does your route file (probably 'routes/web.php') do with '/api/products'?

Nazarii Semeniuk Over a year ago

My console.log output:

{     "delivery_id": 4,     "user_id": 1,     "is_active": true,     "bill": '00-54753',     "name": 'Name',     "surname": 'Surname',     "father_name": 'Name',     "phone": '+7777777',     "payment_type": "cash",     "delay": null,     "cashback_paid": null,     "card": null,     "payment_screenshot": null,     "cart": null }

And my 'routes/api.php' Route::resource('/products', ProductController::class); My controller code in main post (don't have enough symbols)

Nazarii Semeniuk Over a year ago

Oh, what a stupid error. I used wrong url '/api/products' instead '/api/orders'. Sorry for wasting your time.

Collectives™ on Stack Overflow

How to get JSON in Laravel from vue.js axios POST?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related