我正在尝试为我的调查创建应用实现删除功能。
我正在使用带有mongoose的MongoDB作为数据库,使用node.js / Express作为后端服务器,使用React / Redux作为前端。
虽然我认为我正确设置了路由,但我在axios.delete()上获得了404(Not Found)。
错误说没有找到http://localhost:3000/api/surveys/delete/{the-survey-id-here}
。
我一直在阅读axios,Express,mongoose和其他网站的文档,但是,没有什么对我有用。
我尝试了以下的事情。
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)
所以,如果我理解正确,你有一个Express Js应用程序和一个在不同端口上运行的客户端应用程序,如果是这样,我认为我发现了这个问题
您正在进行ajax调用,就像您在同一台服务器上运行前端和后端一样。这有两种可能的解决方案
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,您必须更改地址res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
这将导致前端和后端代码在同一服务器上运行非常感谢您的所有答案和评论。问题是代理。我正在使用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' }))
}
再次感谢您的所有答案和评论。
必须在路由中间件中启用CORS(删除动词)。
This线程可以帮助你。