Vue Axios Post Cancelled in Laravel (api)

Question

I am currently refactoring some old code. I want to get the data of of a vue form in order to post into my database through laravel's api. Looking at the json output I get & the controllers method everythings looks fine to me. I also tried to move the Route::post code to the regular web.php without success.

I'll post a screenshot of my schema & exact errors message (xhr cancelled).

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::get('/session', 'SessionController@index');
Route::get('/session/{id}', 'SessionController@currentRoom');

Route::post('/create', 'SessionController@create');
Route::put('/session/{id}', 'SessionController@update');
Route::delete('/session/{id}', 'SessionController@destroy');

SessionController.php

<?php

namespace App\Http\Controllers;

use App\Services\LongPolling;
use Faker\Generator;
use App\Session;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Response;


class SessionController extends Controller
{
    public function create(Request $request)
    {
        // $session = new Session();
        // $session->playerName = $faker->name;
        // $session->playerId = $faker->numberBetween($min = 0, $max = 127);
        // $session->roomName = $faker->name;
        // $session->roomDescription = $faker->text;
        // $session->overallValue = $faker->numberBetween($min = 10, $max = 70);
        // $session->playerValue = $faker->randomDigitNotNull;
        // $session->isAdmin = $faker->boolean ? false : true;
        // $session->save();

$validator = Validator::make($request->all(), [
    'roomName' => 'required|string',
    'roomDescription' => 'required|string'
]);
if ($validator->fails()){
    return Response::json(['errors' =>$validator->errors()], 422);
}
  $session =  Session::create([
      'roomName' => $request('roomName'),
      'roomDescription' => $request('roomDescription')
  ]);

  return Response::json(['session' => $session,
  'message' => 'success'], 200);
    }

Create.vue

<template>
  <div>
    <form>
      <strong>roomname:</strong>
      <br />
      <input type="text" v-model="roomName" />
      <br />
      <strong>description:</strong>
      <br />
      <input type="text" v-model="roomDescription" />
      <br />

      <button v-on:click="formSubmit">Click me</button>
  </form>
    </div>

</template>

<script>
export default {
  components: {},
  data() {
    return {
      roomName: "",
      roomDescription: ""
    };
  },
  methods: {
    formSubmit() {
      axios
        .post("/api/create", {
          roomName: this.roomName,
          roomDescription: this.roomDescription
        })

        .then(function(response) {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style>
</style>

room.blade.php

<!-- Stored in resources/views/child.blade.php -->


@extends('layouts.app')


@section('title', 'Scrumpoker')



@section('content')
<br>
<br>


<create>
</create>



@endsection

app.js

require('./bootstrap');


import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'



import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

Vue.use(Vuetify)

const opts = {}


// Vue.component('App', require('./components/App.vue').default);
// Vue.component('Card', require('./components/card.vue').default);
// Vue.component('session', require('./components/Session.vue').default);
Vue.component('create', require('./components/Create.vue').default);





const app = new Vue({
    el: '#app',
    vuetify: new Vuetify(),

});

Dattatraya Kale Dattatraya Kale · Accepted Answer · 2019-10-23T11:15:57

0

votes

Check if it's related to CORS and not related to POST?

Vue Axios Post Cancelled in Laravel (api)

1 Answers