Express服务端传输axios获取的JSON数据fetch解析报错如何解决

问题根因 #

• 前端fetch调用逻辑错误：fetch返回的是Response对象，不能直接传给JSON.parse()，对象转字符串后为[object Response]，首字符为o，和报错信息完全匹配。
• 服务端路由配置逻辑错误：
  1. 根路径/被express.static中间件映射到public目录下的index.html，你在axios回调里注册的app.get('/')会覆盖静态文件返回，导致用户访问根路径拿不到页面
  2. 路由定义写在axios的then回调中，只有axios请求成功后路由才会被注册，且每次axios请求成功都会重复注册同一路由，逻辑不符合规范
  3. getDataLAMP_0函数从未被调用，axios请求不会自动执行
• 数据格式处理冗余：express自带res.json()方法可以直接返回JS对象，不需要手动调用JSON.stringify()
• axios请求头配置错误：Access-Control-*、mode、credentials都不属于客户端请求头参数，配置无效

修复后的代码 #

server.js #

const express = require('express');
const app = express();
const axios = require('axios')
app.listen(3000, () => console.log('服务启动在3000端口'));
app.use(express.static('public'));

const username = 'admin'
const password = 'admin'
const token = Buffer.from(`${username}:${password}`, 'utf8').toString('base64')
const urlLAMP_0 = 'http://127.0.0.1:8282/~/mn-cse/mn-name/LAMP_0/DATA/la'
const urlLAMP_1 = 'http://localhost:8282/~/mn-cse/mn-name/LAMP_1/DATA/la'

// 抽离获取数据的方法
async function getDataLAMP_0(){
  const response = await axios.get(urlLAMP_0, {
    headers: {
      "X-M2M-RI":"OM2M-webpage",
      'Authorization': `Basic ${token}`,
      'Accept': 'application/json'
    }
  })
  return response.data['m2m:cin']
}

// 单独注册接口路由，不和静态文件路径冲突
app.get('/api/lamp0', async (req, res) => {
  try {
    const data = await getDataLAMP_0()
    res.json(data) // 直接返回对象，express自动转json字符串并添加正确响应头
  } catch (e) {
    res.status(500).json({msg: '获取数据失败', error: e.message})
  }
})

public/index.html 脚本部分 #

fetch('/api/lamp0')
.then(function(response) {
  // 先调用.json()解析响应体为JS对象，不需要手动JSON.parse
  return response.json()
})
.then(function(jsondata) {
  // 直接使用解析完成的对象
  document.getElementById("rn0").textContent = jsondata.rn;
  document.getElementById("ty0").textContent = jsondata.ty;
  document.getElementById("ri0").textContent = jsondata.ri;
  document.getElementById("pi0").textContent = jsondata.pi;
  document.getElementById("ct0").textContent = jsondata.ct;
  document.getElementById("lt0").textContent = jsondata.lt;
  document.getElementById("st0").textContent = jsondata.st;
  document.getElementById("cnf0").textContent = jsondata.cnf;
  document.getElementById("cs0").textContent = jsondata.cs;
  document.getElementById("con0").textContent = jsondata.con;
})
.catch(function(e) {
  // 添加错误捕获避免未处理的Promise报错
  console.error('请求失败', e)
})

内容的提问来源于stack exchange，提问作者Badr-Eddine El mostaine