CODEWITHSUNDEEP
reactjsexpressfetchpusherchatkit
Alec Livinghouse
Alec Livinghouse

Reputation: 57

fetch request from react to express not working

My fetch route from react to express shows a 404 not found error.

Here is the code on the client

 deleteRoom(roomId){
    console.log('this is the current user in delete room', this.state.currentUser);
    fetch('http://localhost:3001/deleteRoom', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ roomId }),
    })
      .then(response => {
        console.log('here is the resposne', response);
    }).catch(error => console.log('this is the delete room error', error))
      this.getRooms()
}

Here is the code on the server

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const Chatkit = require('@pusher/chatkit-server')

const app = express()
app.use(function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type,Authorization');
  res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,PATCH,DELETE');
  if (req.method === 'OPTIONS') {
    return res.send(204);
  }
  next();
});

const chatkit = new Chatkit.default({
  instanceLocator: 'v1:us1:77eb2c45-a91a-4942-bde8-1e7273b4788b',
  key: '76774b1d-427f-475f-8c05-643cdc492ca9:G3imsKMytcWbYeYolnMJcDpvYanvCgG6lpvrYP1YSjc=',
})

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.use(cors())

app.post('/users', (req, res) => {
  const {username} = req.body;
  console.log('here is the username on the server', username);
  chatkit
    .createUser({
      id: username,
      name: username
    })
    .then(()=> res.sendStatus(201))
    .catch(err => {
      if(error.error === 'services/chatkit/user_already_exists'){
        res.sendStatus(200)
      } else {
        res.status(err.status).json(err);
      }
    })
})

app.post('/authenticate', (req, res) => {
  const authData = chatkit.authenticate({userId: req.query.user_id})
  res.status(authData.status).send(authData.body);
})

app.post('/deleteRoom', (req, res) => {
  console.log('this is gettign to the server');
  chatkit.deleteRoom({
  id: req.body.roomId
   });
});

const PORT = 3001
app.listen(PORT, err => {
  if (err) {
    console.error(err)
  } else {
    console.log(`Running on port ${PORT}`)
  }
})

Here is the response message from the client: here is the response: Response {type: "cors", url: "http://localhost:3001/deleteRoom", redirected: false, status: 404, ok: false, …}

the catch does not fire

Upvotes: 0

Views: 1133

Answers (1)

andrewkusuma
andrewkusuma

Reputation: 1

is only /deleteRoom endpoint is wrong or any post method not working to catch? To check where is the problem

  1. Use Postman or Insomnia to test you backend services. Tools will show status code.

  2. You can use axios lib for alternative for client side fetch

I do not know much about fetch. Axios will automatically throw to catch when status code is more than 200

Upvotes: 0

Related Questions