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

Question

我正在开展一个个人项目，该项目将允许用户根据他们对类型的偏好来查找新书。我使用的数据库是 MongoDB。但是，虽然我能够使用 Postman 在后端获取所有数据，但我无法将其正确显示在前端。目前，我只是试图将数据发送到前端并至少在 console.log'd 中，但它并没有那么远。

这是路由文件中的代码。

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

这是路由文件指向并正在运行的后端代码：

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});
  }
}

这是我在前端不工作的代码。

    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}`)
      }
    }

我的代码栈是 Vue.js、Express.js、Node.js 和 Axios。在前端，我尝试将 axios.get() 的内部代码设置为“/books/PB”，然后尝试 getEverything(genre) 和 /books/${genre}，但似乎都不起作用。

我收到的错误是 404 Request Failed 错误，它来自 getEverything() 函数中的 catch 块。我不确定为什么当后端工作正常时前端无法获取数据。是不是我做错了什么？

Answer 1

404 是Not found 的 HTTP 状态码，这意味着在 localhost 上没有为/books 设置路由。实际上，/books 会路由到您的应用程序，而不是后端（除非您在应用程序服务器上设置了重定向到后端的代理）。

如果涉及代理，则可能是配置错误。否则，Axios 请求中的目标 URL 应该是 <backend_url>/books（例如，http://localhost:9999/books 后面在 9999 端口上本地运行，而应用程序在其他端口上运行）。

Answer 2

改变

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

到

let genre = "PB"

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

原因是配置对象的参数部分被转换为查询字符串（/books?genre=PB）而不是/books/PB, which is what the backend is expecting

更多：https://masteringjs.io/tutorials/axios/get-query-params