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

改变

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

到

let genre = "PB"

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

原因是 config 对象的 params 部分被转换为查询字符串 (/books?genre=PB) 而不是 /books/PB, which is what the backend is expecting

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

Answer 2

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

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

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

2 个答案: