如何解决当我尝试从axios调用api数据时出现404错误
HomeScreen.js的代码以获取数据: 在package.json中设置代理
"proxy": "http://127.0.0.1:5000"
我正尝试从本地服务器获取数据,如下图所示
import React,{ useEffect,useState } from 'react';
import { Link } from 'react-router-dom';
import data from '../data';
import axios from 'axios';
function HomeScreen(props) {
const [products,setProduct] = useState([]);
useEffect(() => {
const fetchData = async () => {
const {data} = await axios.get("/api/products");
setProduct(data);
}
fetchData();
return() => {
};
},[])
return <ul className="products">
{
products.map(product =>
<li key={product._id}>
<div className="product">
<Link to={'/product/' + product._id}><img className="product-image" src="/images/d1.jpg" alt="Product" />
</Link>
<div className="product-name"><Link to={'/product/' + product._id}> {product.name}</Link></div>
<div className="product-brand">{product.brand}</div>
<div className="product-price">{product.price}</div>
<div className="product-rating">{product.rating} Stars {product.numReviews}</div>
</div>
</li>
)
}
</ul>
}
export default HomeScreen;
解决方法
您正在尝试获取具有相对路径/api/products
的数据,如果看到错误,则浏览器将尝试获取http://localhost:3000/api/products
。
将您的抓取更改为此:
axios.get("http://localhost:5000/api/products");
或者您应该在端口5000
上运行您的react应用
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。