从反应中获取请求以表达不工作答案

【问题标题】：fetch request from react to express not working从反应中获取请求以表达不工作
【发布时间】：2019-10-09 05:05:27
【问题描述】：

我从 react 到 express 的 fetch route 显示 404 not found 错误。

这是客户端上的代码

 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()
}

这是服务器上的代码

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}`)
  }
})

这是来自客户端的响应消息：这是响应：响应 {type: "cors", url: "http://localhost:3001/deleteRoom", redirected: false, status: 404, ok: false, ...}

没有触发

【问题讨论】：

发布你的整个 server.js
刚刚发布了我的整个 server.js 文件
您是否尝试过使用 cURL 或 ARC 或 Postman 等任何 api 工具？

标签： reactjs express fetch pusher chatkit

【解决方案1】：

只有/deleteRoom 端点是错误的，还是任何 post 方法无法捕获？检查问题出在哪里

使用 Postman 或 Insomnia 测试您的后端服务。工具将显示状态代码。
您可以使用 axios lib 替代客户端获取

我对 fetch 了解不多。当状态码大于200时，axios会自动抛出捕捉

【讨论】：