AxiosError：加载资源失败：net::ERR_CONNECTION_REFUSED

Question

I am still learning react and I am building an app with MERN Stack. I tried submitting a post from the form, which is supposed to send data to the MongoDB Atlas database and also render the post on the page. But no data is sent to the database, nor is it rendered on the page. I don't really know where the problem is coming from, but I am having an axios error and a 404 error on the Chrome browser console. I don't know if Axios is not connected to the backend or if there is a problem with my codes.

Form.js

import React, { useState, useEffect } from 'react';
import { TextField, Button, Typography, Paper } from '@material-ui/core';
import FileBase from 'react-file-base64';
import { useDispatch, useSelector } from 'react-redux';

import useStyles from './styles';
import { createPost, updatePost } from '../../actions/posts';

//GET POST CUURENT ID

const Form = ({ currentId, setCurrentId }) => {
    const [postData, setPostData] = useState({creator: '', title: '', message: '', tags: '', selectedFile: ''});
    const post = useSelector((state) => currentId ? state.posts.find((p) => p._id === currentId) : null);    
    const classes = useStyles();
    const dispatch = useDispatch();
    
    useEffect(() => {
        if(post) setPostData(post);
    }, [post])

    const handleSubmit = (e) => {
        e.preventDefault();

        if(currentId) {
            dispatch(updatePost(currentId, postData));
           
        } else {
            dispatch(createPost(postData));
        }   
        
        clear();
        
    }

    const clear = () => {
        setCurrentId(null);
        setPostData({creator: '', title: '', message: '', tags: '', selectedFile: ''});

    }

   
    return (
        <Paper className={classes.paper}>
            <form autoComplete='off' noValidate className={`${classes.root} ${classes.form}`} onSubmit={handleSubmit}>
            <Typography variant='h6'>{ currentId ? 'Edit' : 'Create' } Your Expressions</Typography>
            <TextField name='creator' variant='outlined'  label='Creator'  fullWidth value={postData.creator} onChange={(e) => setPostData({ ...postData, creator: e.target.value })} />
            <TextField name='title' variant='outlined'  label='Title'  fullWidth value={postData.title} onChange={(e) => setPostData({ ...postData, title: e.target.value })} />
            <TextField name='message' variant='outlined'  label='Message'  fullWidth value={postData.message} onChange={(e) => setPostData({ ...postData, message: e.target.value })} />
            <TextField name='tags' variant='outlined'  label='Tags'  fullWidth value={postData.tags} onChange={(e) => setPostData({ ...postData, tags: e.target.value })} />
            <div className={classes.fileInput}><FileBase  type="file"multiple={false} onDone={({base64}) => setPostData({ ...postData, selectedFile: base64 })} />
            </div>
            <Button className={classes.buttonSubmit} variant='contained' color='primary' size='large' type='submit' fullWidth>Submit</Button>
            <Button  variant='outlined' color='primary' size='large' onClick={clear} fullWidth>Clear</Button>
            </form>
        </Paper>
    );
}

export default Form;

Server/index.js

import express from 'express';
import bodyParser from 'body-parser';
import mongoose from 'mongoose';
import cors from 'cors';

import postRoutes from './routes/posts.js'

const app = express();

app.use('/posts', postRoutes);

app.use(bodyParser.json({ limit: "30mb", extended: true}));
app.use(bodyParser.urlencoded({ limit: "30mb", extended: true}));
app.use(cors());

app.use('/posts', postRoutes);

const CONNECTION_URL = 'mongodb+srv://Akan- 
modanwealth:aakkaann@cluster0.jvfdwah.mongodb.net/?retryWrites=true&w=majority';
const PORT = process.env.PORT || 5000;




mongoose.connect(CONNECTION_URL).then(()=>{console.log('...')})
   .then(() => app.listen(PORT, () => console.log('Server running on port: 
${PORT}')))
   
  .catch((error) => console.log(error.message));

App.js

import React, { useState, useEffect } from 'react';
import { Container, AppBar, Typography, Grow, Grid } from '@material-ui/core';
import { useDispatch } from 'react-redux';

import { getPosts } from './actions/posts';
import Posts from './components/Posts/Posts';
import Form from './components/Form/Form';
import expressions from './images/expressions.jpg';
import useStyles from './styles';


const App = () => {
  const [currentId, setCurrentId] = useState(null);
  const classes = useStyles();
  const dispatch = useDispatch();

useEffect(() => {
    dispatch(getPosts);
}, [currentId, dispatch]);

return (
    <Container maxWidth="lg">
        <AppBar className={classes.appBar} position="static"  >
            <Typography className={classes.heading} variant="h2" align="center">Expressions</Typography>
            <img className={classes.image} src={expressions} alt="expressions" height="80" width="60" />
        </AppBar>
        <Grow in>
            <Container> 
               <Grid container justifyContent="space-between" alignItems="stretch" spacing={3}>
                   <Grid item xs={12} sm={7}>
                       <Posts setCurrentId={setCurrentId} />
                   </Grid>
                   <Grid item xs={12} sm={4}>
                       <Form currentId={currentId} setCurrentId={setCurrentId} />
                   </Grid>
                </Grid>   
             </Container>
         </Grow>
     </Container>
   );
}




 export default App;

api/index.js

import axios from 'axios';

const url = 'http://localhost:5000/posts';

export const fetchPosts = () => axios.get(url);
export const createPost = (newPost) => axios.post(url, newPost);
export const updatePost = (id, updatedPost) => axios.patch(`${url}/${id}`, 
updatedPost);

routes/posts.js

import express from 'express';

import { getPosts, createPost, updatePost} from 
'../controllers/posts.js';

const router = express.Router();

router.get('/', getPosts);
router.get('/', createPost);
router.patch('/:id', updatePost)



export default router;

Here is the error on the browser console

Answer 1

So there are a couple of things. First, you may have exposed your password in your MongoDB URI, so I'd go and change that immediately. Second, is there a reason you're running app.use("/posts", postRoutes); twice?

Lastly, it looks like you're posting to /posts , but you're not specifying a route after that. You didn't share your routes, but from the looks of it /posts uses all routes in your routes folder. You need to give a specific route, like /posts/create or something. Otherwise you're just saying making a POST request to the object with all your middleware and node.js doesn't know which middleware to use.