I'm getting a ERROR Request failed with status code 404 AxiosError: Request failed with status code 404

Question

I have a small web app that mostly works. I'm using React, Express, MongoDB, and Node with Axios for interacting with Mongo/Express. I have a component that is supposed to load data from Mongo, but it seems to want to grab from port 3000 (default) instead of 8000 (Express). I have a line defining "proxy" on 8000 in package.json.

All endpoints are working fine through Postman. Even the browser will get the correct payload if I manually change the port number.

    const [articleInfo, setArticleInfo] = useState({ upvotes: 0, comments: [] });
    const { articleId } = useParams();

    useEffect(() => {
        const loadArticleInfo = async () => {
            const response = await axios.get(`/api/articles/${articleId}`);
            const newArticleInfo = response.data;
            setArticleInfo(newArticleInfo);
        }

        loadArticleInfo();
    }, []);

    const article = articles.find(article => article.name === articleId);

    if (!article) {
        return <NotFoundPage />
    }

Backend "server.js"

import express from 'express';
import { db, connectToDb } from './db.js';

const app = express();
app.use(express.json());

app.get('/api/articles/:name', async (req, res) => {
    const { name } = req.params;

    const article = await db.collection('articles').findOne({ name });

    if (article) {
        res.json(article);
    } else {
        res.sendStatus(404);
    }
});

app.put('/api/articles/:name/upvote', async (req, res) => {
    const { name } = req.params;
   
    await db.collection('articles').updateOne({ name }, {
        $inc: { upvotes: 1 },
    });
    const article = await db.collection('articles').findOne({ name });

    if (article) {
        res.send(`The ${name} article now has ${article.upvotes} upvotes!!!`);
    } else {
        res.send('That article doesn\'t exist');
    }
});

app.post('/api/articles/:name/comments', async (req, res) => {
    const { name } = req.params;
    const { postedBy, text } = req.body;

    await db.collection('articles').updateOne({ name }, {
        $push: { comments: { postedBy, text } },
    });
    const article = await db.collection('articles').findOne({ name });

    if (article) {
        res.send(article.comments);
    } else {
        res.send('That article doesn\'t exist!');
    }
});

connectToDb(() => {
    console.log('Successfully connected to database!');
    app.listen(8000, () => {
        console.log('Server is listening on port 8000');
    });
})

The Full error:

Uncaught runtime errors:
×
ERROR
Request failed with status code 404
AxiosError: Request failed with status code 404
    at settle (http://localhost:3000/static/js/bundle.js:49642:12)
    at XMLHttpRequest.onloadend (http://localhost:3000/static/js/bundle.js:48333:66)
ERROR
Request failed with status code 404
AxiosError: Request failed with status code 404
    at settle (http://localhost:3000/static/js/bundle.js:49642:12)
    at XMLHttpRequest.onloadend (http://localhost:3000/static/js/bundle.js:48333:66)

Any help is greatly appreciated.

Answer 1

When you apply proxy, you see the react port 3000, instead of api port 8000. It is normal.

I believe you are getting 404 not because of proxy, but from the app.get('/api/articles/:name' route. Be sure you send an existing name in the req.params.

You can understand this by adding the following console.log:

app.get('/api/articles/:name', async (req, res) => {
    const { name } = req.params;

    const article = await db.collection('articles').findOne({ name });

    if (article) {
        res.json(article);
    } else {
        console.log("article not  found, so 404");
        res.sendStatus(404);
    }
});