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

【问题标题】：When i try to call the api data from axios i get 404 error当我尝试从 axios 调用 api 数据时，出现 404 错误
【发布时间】：2021-01-06 00:07:10
【问题描述】：

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;

【问题讨论】：

两张截图中的端口不同
“代理”：“localhost:5000”

标签： node.js reactjs api axios http-status-code-404

【解决方案1】：

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

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

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

【讨论】：