问题描述
因此,我正在尝试在 MERN 堆栈上创建一个简单的单页应用程序,该应用程序记录笔记 - 笔记标题和笔记内容,并将它们显示在同一根路径上;数据也应该保存在后端供以后检索。此时,没有身份验证。我的后端似乎运行良好,但是当我将前端 React 应用程序连接到后端 MongoDB 数据库时,我的 GET 请求(使用 axios 实例)失败。
我的后端在 localhost:5000 上呈现,没问题。
但是在 localhost:3000 上,我在 App.jsx 中看到了这个错误:
Error: Request Failed with status code 404
at createError (createError.js:16)
at settle (settle.js:17)
at XMLHttpRequest.handleLoad (xhr.js:62)
这就是我正在做的事情:
后端
// server.js
import express from 'express';
import cors from 'cors';
import notes from './api/notes.route.js';
const app = express();
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use('/api/v1/notes',notes);
app.use('*',(req,res) => res.status(404).json({ error: 'not found' }));
export default app;
// notes.route.js
import express from 'express';
import NotesController from './notes.controller.js';
const router = express.Router();
router
.route('/')
.get(NotesController.apiGetNotes)
.post(NotesController.apiPostNote)
.put(NotesController.apiUpdateNote)
.delete(NotesController.apiDeleteNote);
export default router;
// notes.controller.js
import NotesDAO from '../dao/notesDAO.js';
class NotesController {
static apiGetNotes = async (req,res,next) => {
const notesPerPage = req.query.notesPerPage
? parseInt(req.query.notesPerPage)
: 20;
const page = req.query.page ? parseInt(req.query.page) : 0;
const { notesList,totalNumNotes } = await NotesDAO.getNotes({
page,notesPerPage
});
let response = {
notesList,page,notesPerPage,totalNumNotes
};
res.json(response);
};
export default NotesController;
// notesDAO.js
import mongodb from 'mongodb';
const ObjectID = mongodb.ObjectId;
let notes;
class NotesDAO {
// call this on db connection:
static injectDB = async conn => {
if (notes) return;
try {
notes = await conn.db(process.env.NOTESDB_NS).collection('notes');
} catch (e) {
console.error(`unable to establish collection handle in notesDAO: ${e}`);
}
};
static getNotes = async ({ page = 0,notesPerPage = 20 } = {}) => {
let query;
let cursor;
try {
cursor = await notes.find(query);
} catch (e) {
console.error(`unable to issue find command,${e}`);
return { notesList: [],totalNumNotes: 0 };
}
const displayCursor = cursor.limit(notesPerPage).skip(notesPerPage * page);
try {
const notesList = await displayCursor.toArray();
const totalNumNotes = await notes.countDocuments(query);
return { notesList,totalNumNotes };
} catch (e) {
console.error(
`unable to convert cursor to array or problem counting documents,${e}`
);
return { notesList: [],totalNumNotes: 0 };
}
};
}
export default NotesDAO;
前端
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { browserRouter,Route } from 'react-router-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<browserRouter>
<Route path="/" component={App} />
</browserRouter>
</React.StrictMode>,document.getElementById('root')
);
// App.jsx
import { useState,useEffect } from 'react';
import NoteDataService from './services/note.js';
import Header from './Header';
import Footer from './Footer';
import CreateArea from './CreateArea';
import Notes from './Notes';
const App = () => {
const [notes,setNotes] = useState([]);
useEffect(() => {
retrieveNotes();
},[]);
const retrieveNotes = async () => {
await NoteDataService.getAll()
.then(response => {
console.log(response.data);
setNotes(response.data.notes);
})
.catch(e => console.log(e));
};
return (
<>
<Header />
<CreateArea clicked={addNote} />
<Notes notes={notes} clicked={deleteNote} />
<Footer />
</>
);
};
export default App;
// http-common.js
import axios from 'axios';
export default axios.create({
baseURL: 'http://localhost:5000/api/vi/notes',headers: {
'Content-type': 'application/json'
}
});
// note.js
import http from '../http-common.js';
class NoteDataService {
getAll() {
return http.get('/');
}
}
export default new NoteDataService();
解决方法
你打错了。后端路由是 /api/v1/notes
,但前端正在向 /api/vi/notes