axios GET 请求在 MERN 应用程序中不起作用

Question

因此，我正在尝试在 MERN 堆栈上创建一个简单的 single-page 应用程序，用于记录笔记 - 笔记标题和笔记内容并将它们显示在相同的根路径上；数据也应该保存在后端以供以后检索。此时，没有身份验证。我的后端似乎运行良好，但是当我将前端 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();

Answer 1

你打错了。后端路由是 /api/v1/notes，但前端正在向 /api/vi/notes

发送请求

axios GET 请求在 MERN 应用程序中不起作用

axios GET request not working in MERN application

javascript

mongodb

node.js

express

mern