Axios 获取请求在 Next.js 中的主机上不起作用

分享于2022年07月17日 axios javascript next.js reactjs request 问答
【问题标题】:Axios 获取请求在 Next.js 中的主机上不起作用(Axios Get Request Not Working on Host in Next.js)
【发布时间】:2022-01-26 00:18:39
【问题描述】:

我有一个从 Mongodb 获取记录的 API。当我从数据库调用记录时,记录来了,没有问题。但它不适用于主机。 Failed to load resource: the server responded with a status of 404 () api/improve-language?cat=general:1 之类的控制台出现错误。

我试图获取数据的代码:

useEffect(() => {
    getAllData(category)
  }, [])

  async function getAllData(cat){

    if(cat){
      cat = `?cat=${cat}`
    } else{
      cat = ``
    }
    
    axios
    .get(`/api/improve-language${cat}`)
    .then(res => {
      setAllWords(res.data)
      setNeverAskedWords(res.data)
      newQuestionAndAnswers(res.data)
    })
    .catch(err =>{
      console.log(err)
    })

  }

  • 你能分享API的代码吗?另外, general:1 是一个有效的类别吗?

【解决方案1】:

404 错误表示地址错误。

可能您的 REST API 和 Next JS 客户端在不同的地址上运行。
你能用 http://localhost:3000/api/improve-language 这样的确切地址调用你的GET端点吗?

PS。对于生产就绪的应用程序,最好通过 env 变量传递 API 地址,这样您就可以动态更改它。

  • 我认为这与网址无关。因为它适用于本地。这是 server.js 中的代码: server.use('/api/improve-language', ImproveLanguageRoute)