在我的本地主机中出现错误“无法获取/”用于 javscript

Question

我正在重新审视一些旧的编码项目，给它们一些新的油漆，我注意到我似乎无法让无法获得/错误消失。在控制台中，它显示“加载资源：服务器响应状态为 404（未找到）”

gallery.router.js

const express = require('express');
const router = express.Router();
const galleryItems = require('../modules/gallery.data');

// DO NOT MODIFY THIS FILE FOR BASE MODE

// PUT Route
router.put('/like/:id', (req, res) => {
    console.log(req.params);
    const galleryId = req.params.id;
    for(const galleryItem of galleryItems) {
        if(galleryItem.id == galleryId) {
            galleryItem.likes += 1;
        }
    }
    res.sendStatus(200);
}); // END PUT Route

// GET Route
router.get('/', (req, res) => {
    console.log("get that gallery babe!");
    console.error("error in the router get");
    res.send(galleryItems);
}); // END GET Route

module.exports = router;

Server.js

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const gallery = require('./routes/gallery.router.js');
const PORT = process.env.PORT || 5003;

/** ---------- MIDDLEWARE ---------- **/
app.use(bodyParser.json()); // needed for axios requests
app.use(express.static('build'));

/** ---------- EXPRESS ROUTES ---------- **/
app.use('/gallery', gallery);



/** ---------- START SERVER ---------- **/
app.listen(PORT,  () => {
    console.log('Listening on port: ', PORT);
});

App.jsx

//import React from 'react';
import React, { useState, useEffect } from 'react';

import './App.css';
import axios from 'axios';
import GalleryList from '../GalleryList/GalleryList';
import Container from '@mui/material/Container';
import Card from '@mui/material/Card';







function App() {
const [galleryItems, setGalleryItems] =useState([]);


useEffect(() => {
  console.log('use effect -page load');
  fetchGalleryImages();

  
}, []);

const fetchGalleryImages = () => {
  axios({
    method: 'GET',
    url: '/gallery'
  }).then(response =>{
    setGalleryItems(response.data);
   //console.log("get test", response.data );
  }).catch(error =>{
    console.log(error);
    alert('something is wrong!');
  });
};


  const likePhoto = (galleryId) => {
    console.log(galleryId)
    axios({
      method: 'PUT',
      url: `gallery/like/${galleryId}`
    }).then(response =>{
      fetchGalleryImages();
    }).catch(error => {
        console.log(error);
        alert(':(')
    });
  };



  return (
      <div>
        <header className="App-header">
          <h1 className="App-title">Glimpses of Ghosts</h1>
        </header>
        <br/>
        <Container maxWidth="sm">
        
          <GalleryList galleryItems={galleryItems} likePhoto={likePhoto}/>
        
        </Container>
      </div>
    );

 

}

export default App;

GalleryItem.jsx

import {useState} from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardActions from '@mui/material/CardActions';
import Grid from '@mui/material/Grid';
import IconButton from '@mui/material/IconButton';
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';


function GalleryItem ({galleryItems, likePhoto} ){
    
    const [toggle, setToggle] = useState(true);
    

   
    return(
        <Grid container spacing={2}>
        <Card style={{margin: 10}}>
            <CardContent>
        {
             toggle ?(
                <img onClick={() => setToggle(!toggle)} src={galleryItems.path}/>
                ):
            (
                <p onClick={() => setToggle(!toggle)}> Description: {galleryItems.description} </p>
            )
        }
        </CardContent>
        <CardActions>
        <p key={galleryItems.id}> 
        <IconButton size=" extra small" variant="contained" onClick={() => likePhoto(galleryItems.id)}> 
        <FavoriteBorderIcon/>
        </IconButton>  
        likes: {galleryItems.likes}
        </p> 
        </CardActions>
        </Card> 
        </Grid> 
        
    )

}
export default GalleryItem;

GalleryList.jsx

import { useState } from "react";
import GalleryItem from "../GalleryItem/GalleryItem";

function GalleryList ({galleryItems, likePhoto}) {
    return (
        <ul>
            {
                galleryItems.map(galleryItems => {
                  return <GalleryItem key={galleryItems.id} 
                  galleryItems={galleryItems} 
                  likePhoto={likePhoto}/>

                }
             )
            }
     </ul>
    
     )
}

export default GalleryList;

我做了一些事情来解决问题：

1. 检查以确保本地主机在我的整个项目中都是相同的（所有本地主机：5003）

2. 确保在尝试运行之前运行 npm install

3. 检查我有一个应该路由到应用程序“主页”的 GET