在 axios.delete() 上获取 404(未找到)

IT技术 node.js reactjs mongodb express axios
2021-05-28 10:34:07

我正在尝试为我的调查创建应用程序实现删除功能。

我在数据库中使用 MongoDB 和 mongoose,后端服务器使用 node.js/Express,前端使用 React/Redux。

虽然我认为我正确设置了路由,但我在 axios.delete() 上得到 404(未找到)。

错误说http://localhost:3000/api/surveys/delete/{the-survey-id-here}找不到。

我一直在阅读 axios、Express、mongoose 和其他网站的文档,但是对我来说没有任何效果。

我尝试了以下事情。

  • 使用 findByIdAndRemove() 而不是 deleteOne()
  • 传入surveyId动作创建者const response = await axios.delete("/api/surveys", data: { surveyId });
  • 使用<a></a>代替<button></button>

这是我的代码。

SurveyList.js(具有删除按钮的react组件)

import { fetchSurveys, deleteSurvey } from '../../actions'

...

<div className="card-action">
  <a className="red-text text-accent-1">Yes: {survey.yes}</a>
  <a className="red-text text-accent-1">No: {survey.no}</a>
  <button
    className="btn-floating btn-small waves-effect waves-light red right"
    onClick={() => this.props.deleteSurvey(survey._id)}
  >
    <i className="material-icons">delete_forever</i>
  </button>
</div>

...

const mapStateToProps = ({ surveys }) => {
  return { surveys }
}

export default connect(
  mapStateToProps,
  { fetchSurveys, deleteSurvey }
)(SurveyList)

动作/index.js(动作创建者)

export const deleteSurvey = (surveyId) => async dispatch => {
  const response = await axios.delete(`/api/surveys/delete/${surveyId}`)

  dispatch({ type: FETCH_SURVEYS, payload: response.data })
}

surveyRoute.js(路由处理程序)

app.delete('/api/surveys/delete/:surveyId', async (req, res) => {
  await Survey.deleteOne({ _id: req.params.surveyId })

  const surveys = await Survey.find({ _user: req.user.id }).select({
    recipients: false
  })
  res.send(surveys)
})

服务器/index.js

const express = require('express')
const mongoose = require('mongoose')
const cookieSession = require('cookie-session')
const passport = require('passport')
const bodyParser = require('body-parser')
const keys = require('./config/keys')
require('./models/User')
require('./models/Survey')
require('./services/passport')

mongoose.connect(keys.mongoURI)

const app = express()

app.use(bodyParser.json())
app.use(
  cookieSession({
    maxAge: 30 * 24 * 60 * 60 * 1000, // milliseconds
    keys: [keys.cookieKey]
  })
)
app.use(passport.initialize())
app.use(passport.session())

require('./routes/authRoutes')(app)
require('./routes/billingRoutes')(app)
require('./routes/surveyRoutes')(app)

if(process.env.NODE_ENV === 'production'){
  app.use(express.static('client/build'))

  const path = require('path')
  app.get('*',(req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  })
}

const PORT = process.env.PORT || 5000
app.listen(PORT)
4个回答
In my case, leads/ is the end point. try your end point + survey id
With axios@^0.19.2

       axios
            .delete('/api/leads/' + id)
            .then(res => {
                dispatch({
                    type: DELETE_LEAD,
                    payload: id
                });

所以如果我理解正确,你有一个 Expressjs 应用程序和一个在不同端口上运行的客户端应用程序,如果是这样,我想我发现了问题

您正在进行 ajax 调用,就像您在同一台服务器上同时运行前端和后端一样。这里有两种可能的解决方案

  1. 如果您计划在不同的服务器上运行后端和前端,请将 Axios 删除操作的地址更改为指向正确的服务器

    app.delete('http://localhost:5000/api/surveys/delete/:surveyId', async (req, res) => {
      await Survey.deleteOne({ _id: req.params.surveyId })
    
      const surveys = await Survey.find({ _user: req.user.id }).select({
        recipients: false
      })
      res.send(surveys)
    })
    

    当然,一旦将其部署到生产并启用 CORS,您就必须更改地址

  2. 构建用于生产的客户端应用程序,此过程将编译所有 css、js 和 html 并将其保存到客户端/构建文件夹中,如在线所述

    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
    

    这将导致前端和后端代码在同一台服务器上运行

非常感谢您的所有回答和评论。问题是代理。http-proxy-middleware用来处理开发环境中不同端口之间的请求。所有关于端口的评论都让我意识到我需要检查“setupProxy.js”文件。我修改了文件内的代码,如下所示,解决了问题。

设置代理.js

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(proxy ('/auth/google', { target: 'http://localhost:5000' }))
  app.use(proxy ('/api/**', { target: 'http://localhost:5000' }))
}

再次非常感谢您的所有回答和评论。

必须在路由中间件中启用 CORS(删除动词)。

这个线程可能会帮助你。