时间戳

首页 > 解决方案 > vue端无法显示express res.send()自定义错误信息

mysql - vue端无法显示express res.send()自定义错误信息

问题描述

我有一个带有 express 和 mySQL 的 nuxt 应用程序。

问题：我无法在 vue 端显示 express res.send() 自定义错误消息

假设我想显示一个用户的信息。

这是我的后端代码：

// Find a single User with a userId
exports.findOne = (req, res) => {
  User.findById(req.params.userId, (err, data) => {
    if (err) {
      if (err.kind === 'not_found') {
        res.status(404).send({
          message: `Not found User with id ${req.params.userId}.`
        })
      } else {
        res.status(500).send({
          message: 'Error retrieving User with id ' + req.params.userId
        })
      }
    } else { res.send(data) }
  })
}

这是 Vue 部分

<script>
import axios from 'axios'
import appNavbar from '~/components/appNavbar.vue'

export default {
  components: {
    appNavbar
  },
  data () {
    return {
      userId: '',
      userData: '',
      errorMsg: ''
    }
  },
  methods: {
    fetchUser (evt) {
      evt.preventDefault()
      return axios.get('/api/users/' + this.userId)
        .then((res) => {
          this.userData = res.data
        })
        .catch((err) => {
          this.errorMsg = err.toJSON()
        })
    }
  }
}
</script>

当我给一个不存在的用户的 id 时，我希望能够得到写在后面的自定义错误信息，并显示在前面

但我只得到这个 JSON

{ "message": "Request failed with status code 404", "name": "Error" }

有人有线索吗 ？谢谢 ！

标签： mysqlexpressvue.jsnuxt.js

解决方案

可能会发生此错误，因为您在调用 teh API 时没有设置主机：

return axios.get('/api/users/' + this.userId)

404 错误是因为浏览器未找到此端点。在这种情况下，我建议您尝试在另一个工具（如 Postman）中调用此端点并验证您的 API 是否正确响应。在那之后，修复你对端点的调用，也许它会像下面的代码一样，然后再试一次：

return axios.get(`${your host here}/api/users/ + ${this.userId}`)

推荐阅读