Question

HomeScreen.js的代码以获取数据： 在package.json中设置代理

"proxy": "http://127.0.0.1:5000"

我正尝试从本地服务器获取数据，如下图所示

Error 404 that I get

Image of data to fetch

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;

Answer 1

您正在尝试获取具有相对路径/api/products的数据，如果看到错误，则浏览器将尝试获取http://localhost:3000/api/products。将您的抓取更改为此：

axios.get("http://localhost:5000/api/products");

或者您应该在端口5000上运行您的react应用

当我尝试从axios调用api数据时出现404错误

1 个答案: