Laravel ReactJS Post Method Not Allowed - laravel

Question

I know there are lots of solution for this kind of problem that I'm having. But I think I have almost tried most of them and none works.
My experience with PHP Laravel is quite good but not with front-end libraries or framework such as VueJS or ReactJS. I am planning to expand my knowledge with front-end part with ReactJS.
I have created a sample project that is food ordering system. These are the tables:-
User migration table
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->string('email')->unique();
$table->string('password');
$table->rememberToken();
$table->timestamps();
});
}
Food migration table
public function up()
{
Schema::create('foods', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->string('description')->default('');
$table->boolean('in_stock')->default(1);
$table->timestamps();
});
}
Food_user migration table
public function up()
{
Schema::create('food_user', function (Blueprint $table) {
$table->increments('id');
$table->integer('quantity');
$table->boolean('is_served')->default(0);
$table->timestamps();
});
}
My routes and related controller:-
web.php
<?php
Route::get('/', function () {
return view('welcome');
});
Route::resource('food', 'FoodController');
Route::get('/allfood', 'FoodController#index');
Route::post('/addfood', 'FoodController#create');
// Route::group(['middleware' => 'cors'], function($router){
// Route::post('/addfood', 'FoodController#create');
// });
FoodController
<?php
namespace App\Http\Controllers;
use App\Food;
use Illuminate\Http\Request;
class FoodController extends Controller
{
/**
* Display a listing of the resource.
*
* #return \Illuminate\Http\Response
*/
public function index()
{
return response()->json(Food::all());
}
/**
* Show the form for creating a new resource.
*
* #return \Illuminate\Http\Response
*/
public function create()
{
$newfood = Food::create([
'name' => request('foodname'),
'description' => request('fooddesc'),
'in_stock' => 1,
]);
return response()->json(Food::all());
}
}
I can display the seeded data well with axios
Main.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Food from './Food';
export default class Main extends Component {
constructor() {
super();
this.state = {
foods: [],
currentPage: 1,
}
}
componentDidMount() {
axios({
method: 'get',
url: 'http://localhost:8000/allfood'
})
.then(response => {
this.setState({ foods: response.data });
});
}
renderFoods() {
return this.state.foods.map(foods => {
return (
<div className="col-md-8 col-md-offset-2" key={foods.id}>
<div className="panel panel-default">
<div className="panel-heading">{ foods.name }</div>
<div className="panel-body">
{ foods.description }
</div>
</div>
</div>
);
})
}
changePage(pagenum) {
this.setState({currentPage:pagenum});
}
render() {
switch(this.state.currentPage) {
case 1:
return (
<div className="container-fluid" style={{marginTop: 50 + 'px'}}>
<div className="top-right links">
<a href="#" onClick={() =>this.changePage(2)}>Add Food</a>
<a href="#" onClick={() =>this.changePage(1)}>Order Food</a>
</div>
<div className="row text-center">
<h2>List of Menu</h2>
</div>
<div className="row">
{ this.renderFoods() }
</div>
</div>
);
break;
case 2:
return (
<div>
<div className="container-fluid" style={{marginTop: 50 + 'px'}}>
<div className="top-right links">
<a href="#" onClick={() =>this.changePage(2)}>Add Food</a>
<a href="#" onClick={() =>this.changePage(1)}>Order Food</a>
</div>
</div>
<Food/>
</div>
);
break; }
}
}
if (document.getElementById('main')) {
ReactDOM.render(<Main />, document.getElementById('main'));
}
But to add a new record (new food). Here I am stuck.
Food.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Food extends Component {
constructor() {
super();
this.state = {
newFood: {
name: '',
description: '',
instock: 0
},
foods: []
}
}
submitMenu () {
var foody = this.state.newFood;
console.log(foody);
var testpost = axios({
method: 'post',
url: 'http://localhost:8000/addfood',
data: {
name: foody.name,
description: foody.description,
in_stock: foody.instock
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
console.log(testpost);
}
handleInput(key, e) {
var state = Object.assign({}, this.state.newFood);
state[key] = e.target.value;
this.setState({newFood: state });
}
render() {
return (
<div className="container-fluid" style={{marginTop: 50 + 'px'}}>
<div className="row text-center">
<h2>Add Menu</h2>
</div>
<div className="row">
<div className="col-md-8 col-md-offset-2">
<div className="panel panel-default">
<div className="panel-body">
<form onSubmit={this.submitMenu.bind(this)} method="POST">
<div className="form-group">
<label>Food Name</label>
<input type="text" className="form-control" placeholder="Food Name" name="foodname" onChange={(e)=>this.handleInput('name',e)}/>
</div>
<div className="form-group">
<label>Food Description</label>
<textarea className="form-control" name="fooddesc" onChange={(e)=>this.handleInput('description',e)}></textarea>
</div>
<div className="checkbox">
<label>
<input type="checkbox" name="instock" value="1"/> In Stock?
</label>
</div>
<button type="submit" className="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
);
}
}
When I type new information in the form and submit. Laravel throws error:-
Symfony \ Component \ HttpKernel \ Exception \
MethodNotAllowedHttpException
No message
And when I check the browser's console log, here what I see:-
> Object { name: "Deep Fried Chicken", description: "Dipped with chill sauce", instock: 0 }
> Promise { <state>: "pending" }
So what is the problem here? I have tried:-
Install and configure Laravel Cors to bypass CSRF.
Create a specific Laravel Cors middleware group.
Change method from POST to GET.
Remove (comment) \App\Http\Middleware\VerifyCsrfToken::class from
kernel.php.
Try hardcoding data at axios.
I suspect my usage of axios post method is not right. Still, I just follow the documentation.
This is my first experience on full javascript front-end development. And my knowledge of javascript is very very little. I hope my question here is proper and fully explained.....

Answer 1

ur code is right, u just need to inform ur create method that has Request as param to get all data sent from ur axios code.
ur create would be like this and u need to return http success status code to ur client side code (201) :
for more information about http code read this article : link
/**
* Show the form for creating a new resource.
*
* #return \Illuminate\Http\Response
*/
public function create(Request $request)
{
$newfood = Food::create([
'name' => $request->get('foodname'),
'description' => $request->get('fooddesc'),
'in_stock' => 1,
]);
//return response()->json(Food::all()); /* u don't need to return data here */
return response()->json([],201);
}