GET 请求在前端反复失败，但在后端没有

Question

I'm working on a personal project that will allow users to find new books based on their preferences for the genre. The database I'm using is MongoDB. However, while I'm able to get all the data on the backend using Postman, I can't get it properly displayed on the frontend. At the moment, I'm just trying to get the data sent to the front end and at least console.log'd but it isn't making it that far.

Here is the code in the routes file.

  router.get('/books/:genre', bookBuilder.get_some_books)

Here's the code on the backend that the routes file is pointing to and is working:

exports.get_some_books = async function (req, res) {
  let { genre } = req.params;
  try {
    let books = await Book.find({"genre": genre});
    if (books) {
      res.json(books)
    } else {
      res.status(404).send({error: 'Not Found'});
    }
  } catch (err) {
    res.status(500).send({error: err.message});
  }
}

Here's my code on the frontend that is not working.

    async getEverything() {
      try {
        let pbBooks = await axios.get(`/books/`, {
          method: 'GET',
          headers: {'Content-Type': 'application/json'},
          params: {
            genre: 'PB'
          }
        })
        if (pbBooks) {
          console.log(pbBooks)
        } else {
          this.$router.push('/Error');
        }
      } catch (err) {
        console.log(`Network error: ${err.message}`)
      }
    }

My code stack is Vue.js, Express.js, Node.js and Axios. On the frontend, I've tried making the inner code of axios.get() into '/books/PB' and then tried getEverything(genre) along with /books/${genre} but neither seems to be working.

The error I am getting is a 404 Request Failed error that is from the catch block in the getEverything() function. I'm not sure why the frontend is unable to get the data when the backend works just fine. Is there anything I'm doing wrong?

Answer 1

Change

let pbBooks = await axios.get(`/books/`, {
...

to

let genre = "PB"

let pbBooks = await axios.get(`/books/${genre}`, {
  method: 'GET',
  headers: {'Content-Type': 'application/json'}
})

reason is the params part of the config object is converted to query strings ( /books?genre=PB ) instead of /books/PB, which is what the backend is expecting

More: https://masteringjs.io/tutorials/axios/get-query-params

Answer 2

404 is the HTTP status code for Not found , which implies there is no route setup on localhost for /books . Actually, /books would route to your app, not the backend (unless you have a proxy setup on your app server that redirects to the backend).

If a proxy were involved, it's likely misconfigured. Otherwise, the target URL in the Axios request should be <backend_url>/books (eg, http://localhost:9999/books with the back running locally on port 9999, and the app on some other port).