前端React应用如何将代理服务器获取的数据转为JS可处理数据，JSON.parse()无效怎么办

第一步：修正服务端返回逻辑 #

Express中res.send()默认不会给纯字符串类型的返回值设置application/json响应头，且不会自动做JSON合法性校验，优先改用res.json()方法处理返回：

• 错误写法示例：

const fs = require('fs')
app.get('/api/data', (req, res) => {
  // 直接读取JSON文件字符串后返回
  const jsonContent = fs.readFileSync('./config.json', 'utf-8')
  res.send(jsonContent)
})

• 正确写法示例：

const fs = require('fs')
app.get('/api/data', (req, res) => {
  // 先将读取的字符串转为JS对象，再用res.json返回
  const jsonObj = JSON.parse(fs.readFileSync('./config.json', 'utf-8'))
  res.json(jsonObj)
})

如果必须用res.send()，手动添加正确响应头即可：

const fs = require('fs')
app.get('/api/data', (req, res) => {
  const jsonContent = fs.readFileSync('./config.json', 'utf-8')
  res.setHeader('Content-Type', 'application/json; charset=utf-8')
  res.send(jsonContent)
})

第二步：校验本地JSON文件合法性 #

JSON语法不允许出现以下情况，存在任意一种都会导致解析失败：

• 键/值用单引号包裹
• 最后一个键值对末尾存在 trailing comma（ trailing逗号）
• 文件内包含// 或者 /* */ 格式的注释
• 存在中文乱码（读取文件时必须指定utf-8编码）
  可以把服务端读取到的JSON字符串打印到控制台，手动校验格式是否正确。

第三步：调整前端接收逻辑 #

优先用请求库自带的JSON解析方法，不要手动调用JSON.parse()处理原始响应：

• fetch 写法示例：

fetch('/api/data')
  .then(res => {
    if (!res.ok) throw new Error('接口请求失败')
    return res.json() // 自动解析JSON，格式异常会直接抛出错误
  })
  .then(data => {
    // 此处data为直接可用的JS对象
  })
  .catch(err => console.error('解析失败：', err))

• axios 写法示例：
  axios默认会自动解析application/json类型的响应，直接拿响应体的data字段即可：

axios.get('/api/data').then(res => {
  const data = res.data // 直接是可用的JS对象
})

如果还是解析失败，直接打印前端拿到的原始响应字符串，排查是否混入了服务端的调试日志、多余换行/空格等内容导致JSON格式被破坏。

内容的提问来源于stack exchange，提问作者T-WaRa-N