Получение 404 (не найдено) на axios.delete () - PullRequest
Новая
       16

Получение 404 (не найдено) на axios.delete ()

1 голос
/ 28 марта 2019

Я пытаюсь реализовать функцию удаления для моего приложения для создания опроса.

Я использую MongoDB с mongoose для базы данных, node.js / Express для внутреннего сервера и React / Redux для внешнего интерфейса.

Хотя мне кажется, что я правильно настроил маршрутизацию, я получаю 404 (Не найдено) на axios.delete ().

Ошибка говорит о том, что 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 (реагирующий компонент, имеющий кнопку удаления) 

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)

actions / 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)

Ответы [ 3 ]

0 голосов
/ 28 марта 2019

Так что, если я не правильно понял, у вас есть приложение 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 исохраните его в папке client / build, как указано в строке 

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

    Это приведет к выполнению кода веб-интерфейса и внутреннего интерфейса на одном сервере

0 голосов
/ 29 марта 2019

Большое спасибо за все ответы и комментарии.Проблема была в прокси.Я использую http-proxy-middleware для обработки запросов между различными портами в среде разработчика.Все комментарии о портах заставили меня понять, что мне нужно проверить файл 'setupProxy.js'.Я изменил код внутри файла, как показано ниже, и это решило проблему.

setupProxy.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' }))
}

Еще раз большое спасибо за все ответы и комментарии.

0 голосов
/ 28 марта 2019

CORS (Удалить глагол) должен быть включен в промежуточном программном обеспечении вашего маршрута.

Эта ветка может вам помочь.

...