首页 > 解决方案 > Axios 只为程序中的一个函数返回 HTML 而不是 JSON

问题描述

我正在使用跟踪学生的 MEVN 堆栈构建一个小型 CRUD 应用程序。响应以 HTML 格式而不是 JSON 格式输出:

蒙哥模型

var StudentSchema = new mongoose.Schema({
  first: String,
  last: String,
  teacher: String,
  classroom: String,
  major: String,
  minor: String,
  updated_date: { type: Date, default: Date.now },
});

高速路由器

router.get('/', function(req, res, next) {
  Book.find(function (err, products) {
    if (err) return next(err);
    res.json(products);
  });
});

学生名单组件

created () {
    axios.get(`/student`)
    .then(response => {
      console.log(response.data);
      this.students = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
  },

每次我调用“学生”路由来获取所有学生的列表时,我都会reponse.data以 HTML 而不是 JSON 的形式返回。

返回的数据 (HTML)

<title>mevn-stack</title>
<script type=text/javascript src=/static/js/manifest.d39e40457f281fdf3544.js></script>
<script type=text/javascript src=/static/js/vendor.a0442dcc64c824d931ee.js></script>
<script type=text/javascript src=/static/js/app.b0051853730faf43e49b.js></script> 

控制台错误

s.foreach 不是函数

更新

这是@JoelHager 推荐的对学生列表组件中的响应进行字符串化的输出

{
  "data": "<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content=\"width=device-width,initial-scale=1\"><title>mevn-stack</title><link href=/static/css/app.ae61a91c1a891593d309fd6551053eab.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.a9cf3b120af2eaf30b2a.js></script><script type=text/javascript src=/static/js/vendor.7f820bcda7e516bfce3e.js></script><script type=text/javascript src=/static/js/app.a88ae44d36b2723e3a14.js></script></body></html>",
  "status": 200,
  "statusText": "OK",
  "headers": {
    "accept-ranges": "bytes",
    "cache-control": "public, max-age=0",
    "connection": "keep-alive",
    "content-length": "512",
    "content-type": "text/html; charset=UTF-8",
    "date": "Fri, 24 Apr 2020 10:00:40 GMT",
    "etag": "W/\"200-171aba15734\"",
    "last-modified": "Fri, 24 Apr 2020 10:00:09 GMT",
    "x-powered-by": "Express"
  },
  "config": {
    "transformRequest": {},
    "transformResponse": {},
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1,
    "headers": {
      "Accept": "application/json, text/plain, */*"
    },
    "method": "get",
    "url": "/student/"
  },
  "request": {}
}

标签: node.jsjsonexpressaxioscrud

解决方案


推荐阅读