React客户端向服务端发送循环引用JSON解析异常求助

你遇到的问题本质是请求头设置和服务端自动解析的冲突：

• 客户端用Flatted.stringify(object)生成了类似JSON的字符串[{'a': '1'}]，但你设置了请求头为Content-Type: application/json。
• 绝大多数服务端框架（比如Node.js的Express）会对application/json类型的请求体自动执行JSON解析——也就是说，服务端会把你发送的[{'a': '1'}]字符串当成JSON来解析，转成JavaScript对象[{a: '1'}]。
• 而Flatted.parse()的输入要求是Flatted序列化后的原始字符串，不是已经解析好的JS对象，自然会解析失败。

针对这个问题，有两种简单可行的解决办法：

方案1：修改请求头为纯文本类型，避免服务端自动解析 #

把请求头改成text/plain，让服务端直接接收你发送的Flatted原始字符串，不做任何自动解析：

客户端代码示例（fetch）： #

const flattedData = Flatted.stringify(object);
fetch('/your-api-endpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'text/plain' // 替换原来的application/json
  },
  body: flattedData
});

服务端代码示例（Express）： #

如果用Express，你可以用express.text()中间件自动解析文本请求体：

const express = require('express');
const app = express();
const Flatted = require('flatted');

// 注册文本解析中间件
app.use(express.text());

app.post('/your-api-endpoint', (req, res) => {
  // req.body就是Flatted序列化的原始字符串
  const parsedData = Flatted.parse(req.body);
  // 处理你的业务逻辑
  res.send('解析成功');
});

方案2：将Flatted字符串包装在JSON对象中发送（保留application/json请求头） #

如果必须保留application/json请求头，可以把Flatted生成的字符串放在一个JSON对象的字段里，服务端先解析JSON取出字符串，再用Flatted解析：

客户端代码示例： #

const flattedStr = Flatted.stringify(object);
// 把Flatted字符串包装在JSON对象里
const requestBody = JSON.stringify({ flattedData: flattedStr });

fetch('/your-api-endpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: requestBody
});

服务端代码示例（Express）： #

const express = require('express');
const app = express();
const Flatted = require('flatted');

// 保留JSON解析中间件
app.use(express.json());

app.post('/your-api-endpoint', (req, res) => {
  // 先从JSON对象中取出Flatted字符串
  const flattedStr = req.body.flattedData;
  // 再用Flatted解析
  const parsedData = Flatted.parse(flattedStr);
  // 处理业务逻辑
  res.send('解析成功');
});

如果你用的是axios这类HTTP客户端，默认会自动将请求体转换为JSON，所以即使你发送的是Flatted字符串，axios也会额外做一次JSON.stringify()。这时候需要手动禁用自动转换：

axios.post('/your-api-endpoint', Flatted.stringify(object), {
  headers: {
    'Content-Type': 'text/plain'
  },
  transformRequest: [data => data] // 禁止axios自动转换请求体
});

内容的提问来源于stack exchange，提问作者hitendra