Not matching urls on frontend and backend

I have a problem with matching routes. I am runnning react app on port localhost:3000, and node/express server is running on port localhost:3001. I am trying to create a club by firing this request on the frontend:

async addClub(club) {
   try {
      let postData = await fetch(`${this.backendUrl}/club`, {
         method: 'POST',
         headers: {
           'Accept': 'application/json',
               'Content-Type': 'application/json',
            },
            body: JSON.stringify({...club}),
      });

this.backendUrl is correctly imported

Route on the backend file is:

  router.post('/club', async (req, res) => {
  try {
    const body = req.body;
    await new Club(body).save((err, club) => {
      if (err) return console.log(err)
      console.log('New club created');
      res.status(200).send({ msg: 'Club created' });
    });
  } catch(err) {
    res.status(400).json({
      msg: 'Bad Request'
    })
  }
})

But for some reason frontend execution cannot find route specified on the backend.

I get an error: POST http://localhost:3001/club 404 (Not Found)

I have other routes through which I create other things and they work perfectly.

Any ideas?

  1. You sure you want to manually set the backendUrl when you could call fetch('/club') and use the proxy setup for CRA?

  2. You sure router is setup correctly at /club? Not something like /api/club or even /club/club, or possibly even not attached to express at all?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.