Reactjs 未找到Axios获取错误404(Laravel和React)
大家好,当我试图在数据库中显示产品时,我在获取数据时遇到问题:Reactjs 未找到Axios获取错误404(Laravel和React),reactjs,laravel,axios,Reactjs,Laravel,Axios,大家好,当我试图在数据库中显示产品时,我在获取数据时遇到问题: app.js:285 GET http://127.0.0.1:8000/api/products 404 (Not Found) dispatchXhrRequest @ app.js:285 xhrAdapter @ app.js:119 dispatchRequest @ app.js:765 Promise.then (async) request @ app.js:542 Axios.<computed>
app.js:285 GET http://127.0.0.1:8000/api/products 404 (Not Found)
dispatchXhrRequest @ app.js:285
xhrAdapter @ app.js:119
dispatchRequest @ app.js:765
Promise.then (async)
request @ app.js:542
Axios.<computed> @ app.js:557
wrap @ app.js:1131
componentDidMount @ app.js:74051
commitLifeCycles @ app.js:59612
commitLayoutEffects @ app.js:62601
callCallback @ app.js:39986
invokeGuardedCallbackDev @ app.js:40035
invokeGuardedCallback @ app.js:40090
commitRootImpl @ app.js:62339
unstable_runWithPriority @ app.js:72776
runWithPriority$1 @ app.js:50837
commitRoot @ app.js:62179
finishSyncRender @ app.js:61605
performSyncWorkOnRoot @ app.js:61591
(anonymous) @ app.js:50887
unstable_runWithPriority @ app.js:72776
runWithPriority$1 @ app.js:50837
flushSyncCallbackQueueImpl @ app.js:50882
flushSyncCallbackQueue @ app.js:50870
discreteUpdates$1 @ app.js:61691
discreteUpdates @ app.js:40604
dispatchDiscreteEvent @ app.js:43966
app.js:74056 Error: Request failed with status code 404
at createError (app.js:699)
at settle (app.js:960)
at XMLHttpRequest.handleLoad (app.js:168)
app.js:285获取http://127.0.0.1:8000/api/products 404(未找到)
DispatchXhreQuest@app.js:285
xhrAdapter@app.js:119
dispatchRequest@app.js:765
Promise.then(异步)
request@app.js:542
Axios@app.js:557
wrap@app.js:1131
componentDidMount@app.js:74051
commitLifeCycles@app.js:59612
commitLayoutEffects@app.js:62601
callCallback@app.js:39986
invokeGuardedCallbackDev@app.js:40035
invokeGuardedCallback@app.js:40090
commitrotimpl@app.js:62339
不稳定的运行优先级@app.js:72776
runWithPriority$1@app.js:50837
Commitrout@app.js:62179
finishSyncRender@app.js:61605
performSyncWorkOnRoot@app.js:61591
(匿名)@app.js:50887
不稳定的运行优先级@app.js:72776
runWithPriority$1@app.js:50837
flushSyncCallbackQueueImpl@app.js:50882
flushSyncCallbackQueue@app.js:50870
离散更新$1@app.js:61691
离散更新@app.js:40604
dispatchDiscreteEvent@app.js:43966
app.js:74056错误:请求失败,状态代码404
在createError(app.js:699)
结算时(app.js:960)
在XMLHttpRequest.handleLoad(app.js:168)
这是我的routes/api.php
<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
Route::middleware('auth:api')->get('/user', function (Request $request) {
return $request->user();
Route::resource('products', 'ProductController');
});
这不是像sugget ABDEL-RHMAN那样的中间件问题。如果您没有身份验证,则不会出现404错误,而是401错误
您确定您的laravel应用程序正在8000端口上侦听吗?
如何启动应用程序?您没有从tabRow()返回任何内容
在DisplayProduct.js中,修改以下内容:
tabRow(){
if(this.state.products instanceof数组){
返回this.state.products.map(函数(对象,i){
回来
})
}
}
将资源
移到中间仓库之外你是上帝的帮助!这解决了404错误。你知道如何处理spread.js:25帖子吗http://localhost:8000/api/products 500(内部服务器错误)
所以在将resurce放置在middlware 404之外的错误消失后,put产品仍然没有显示在页面上?我真的很感激任何帮助,因为我对这种东西还很陌生。非常感谢您没有实现tabrow函数,请尝试返回this.state.products.map(函数(product,i){return({product.id}{product.title})})
是的,但我没有发布它。请看一看有问题的更新,非常感谢,我真的很感谢您将资源放在middlware之外,我有错误spread.js:25帖子http://localhost:8000/api/products 500(内部服务器错误)spread.js:25未捕获(承诺中)错误:请求失败,状态代码为500,位于e.exports(spread.js:25)在e.exports(spread.js:25)在XMLHttpRequest.l.onreadystatechange(spread.js:25)
我先运行serverphp-artisan-service
,然后运行npm-dev
在comandphp artisan服务之后
我得到http://127.0.0.1:8000 [Fri Apr 24 09:04:14 2020]PHP 7.4.5开发服务器(http://127.0.0.1:8000)开始[Fri Apr 24 09:04:15 2020]127.0.0.1:52077接受[Fri Apr 24 09:04:15 2020]127.0.0.1:52078接受
欢迎使用StackOverflow。你也可以仔细解释一下为什么会这样。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Product;
class ProductController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$products = Product::all();
return response()->json($products);
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$product = new Product([
'title' => $request->get('title'),
'body' => $request->get('body'),
'price' => $request->get('price')
]);
$product->save();
return response()->json('Product Added Successfully.');
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
$product = Product::find($id);
return response()->json($product);
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
$product = Product::find($id);
$product->title = $request->get('title');
$product->body = $request->get('body');
$product->price = $request->get('price');
$product->save();
return response()->json('Product Updated Successfully.');
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
$product = Product::find($id);
$product->delete();
return response()->json('Product Deleted Successfully.');
}
}
import React, {Component} from 'react';
import axios from 'axios';
import { Link } from 'react-router';
import TableRow from './TableRow';
import MyGlobleSetting from './MyGlobleSetting';
class DisplayProduct extends Component {
constructor(props) {
super(props);
this.state = {value: '', products: ''};
}
componentDidMount(){
axios.get('/api/products')
.then(response => {
this.setState({ products: response.data });
})
.catch(function (error) {
console.log(error);
})
}
tabRow(){
if(this.state.products instanceof Array){
return this.state.products.map(function(object, i){
return ;
})
}
}
render(){
return (
<div>
<h1>Your pizza orders</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>Product Price</td>
<td width="200px">Actions</td>
</tr>
</thead>
<tbody>
{this.tabRow()}
</tbody>
</table>
<button className="btn btn-dark"><Link to="display-chosen-products">Add to Cart</Link></button>
</div>
)
}
}
export default DisplayProduct;
import React, { Component } from 'react';
import { Link, browserHistory } from 'react-router';
import MyGlobleSetting from './MyGlobleSetting';
class TableRow extends Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
let uri = MyGlobleSetting.url + `/api/products/${this.props.obj.id}`;
axios.delete(uri);
browserHistory.push('/display-item');
}
render() {
return (
<tr>
<td>
{this.props.obj.id}
</td>
<td>
{this.props.obj.title}
</td>
<td>
{this.props.obj.body}
</td>
<td>
{this.props.obj.price}
</td>
<td>
<form onSubmit={this.handleSubmit}>
<Link to={"edit/"+this.props.obj.id} className="btn btn-primary">Edit</Link>
<input type="submit" value="Delete" className="btn btn-danger"/>
</form>
</td>
</tr>
);
}
}
export default TableRow;