I'm new to react js and trying to get the data from the database using axios.get when ponentDidmount. This is the request I'm trying to get the products. I'm using react with laravel.
ponentDidMount() {
axios.get('http://localhost:8000/getproducts')
.then(response => {
console.log(response.data);
});
}
In Controller I'm returning the data
public function products()
{
$products = Product::all();
return response()->json($products);
}
After returning the response in axios.get I get the below plain HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learn React</title>
<!-- Fonts -->
<link href=":200,600" rel="stylesheet">
<link href="http://localhost:8000/css/app.css" rel="stylesheet">
</head>
<body>
<div id="crud-app"></div>
<script src="http://localhost:8000/js/app.js"></script>
</body>
</html>
Web.php
<?php
Route::get('{any}', function () {
return view('wele');
})->where('any','.*');
Route::get('/', function () {
return view('wele');
});
Route::post('save-product', 'ProductController@saveProduct')->name('save.product');
Route::get('getproducts', 'ProductController@products')->name('get.products');
I'm new to react js and trying to get the data from the database using axios.get when ponentDidmount. This is the request I'm trying to get the products. I'm using react with laravel.
ponentDidMount() {
axios.get('http://localhost:8000/getproducts')
.then(response => {
console.log(response.data);
});
}
In Controller I'm returning the data
public function products()
{
$products = Product::all();
return response()->json($products);
}
After returning the response in axios.get I get the below plain HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learn React</title>
<!-- Fonts -->
<link href="https://fonts.googleapis./css?family=Nunito:200,600" rel="stylesheet">
<link href="http://localhost:8000/css/app.css" rel="stylesheet">
</head>
<body>
<div id="crud-app"></div>
<script src="http://localhost:8000/js/app.js"></script>
</body>
</html>
Web.php
<?php
Route::get('{any}', function () {
return view('wele');
})->where('any','.*');
Route::get('/', function () {
return view('wele');
});
Route::post('save-product', 'ProductController@saveProduct')->name('save.product');
Route::get('getproducts', 'ProductController@products')->name('get.products');
6 Answers
Reset to default 3Move the api urls to the top of the php file and it is best practice to add 'api/' as the prefix
<?php
Route::post('api/save-product', 'ProductController@saveProduct')->name('save.product');
Route::get('api/getproducts', 'ProductController@products')->name('get.products');
Route::get('{any}', function () {
return view('wele');
})->where('any','.*');
Route::get('/', function () {
return view('wele');
});
Pass addition settings in Axios.get() HTTP call
export const axiosConfig = {
headers: {
'Content-Type': 'application/json;charset=UTF-8',
"Access-Control-Allow-Origin": "*",
"APITOKEN": API_TOKEN
}
};
axios.get('http://localhost:8000/getproducts',axiosConfig)
.then(response => {
console.log(response.data);
});
This is probably a setting of your server because the get response is directed to your react app instead of your api endpoint. Try hosting your api on another port and have axios request that url port instead.
If you are using API call then you have to change your URL like below:
http://localhost:8000/api/getproducts
axios.get(MyGlobleSetting.url + '/api/products')
.then(response => {
this.setState({ products: response.data });
})
.catch(function (error) {
console.log(error);
})
}
render(){
return (
<div>
<h1>Products</h1>
<div className="row">
<div className="col-md-10"></div>
<div className="col-md-2">
<Link to="/add-item">Create Product</Link>
</div>
</div><br />
<table className="table table-hover">
<thead>
<tr>
<td>ID</td>
<td>Product Title</td>
<td>Product Body</td>
<td width="200px">Actions</td>
</tr>
</thead>
<tbody>
{this.tabRow()}
</tbody>
</table>
</div>
)
}
}
export default DisplayProduct;
just add "/" at the end url like this
from "http://localhost:8000/getproducts" to "http://localhost:8000/getproducts/"