从Python后端传JSON到React前端渲染图表时遇431请求头过大错误

问题根源分析 #

1. 后端双重序列化冗余：你在后端先执行chart.to_json()生成JSON字符串，又调用json.dumps(chartJson)再次序列化，导致前端拿到的是带转义字符的字符串，而非可直接使用的JSON对象。
2. 前端渲染写法错误：你将<Vega>组件写成字符串形式"<Vega spec={chart} />"，这种写法不会渲染React组件，反而会让react-vega错误处理该字符串，引发不必要的大体积请求头。

解决方案 #

1. 修正后端序列化逻辑 #

移除多余的json.dumps，直接返回chart.to_json()生成的内容，并设置正确响应头：

chart = altair.Chart(XXX)
# 直接返回JSON格式的图表定义，无需二次序列化
return chart.to_json(), 200, {'Content-Type': 'application/json'}

2. 修正前端请求与渲染逻辑 #

• 请求处理：确保Axios正确解析后端返回的JSON对象并存入state：

const [chart, setChart] = useState(null);

axios.get('/your-chart-api-endpoint')
  .then(res => {
    // 后端返回标准JSON对象，直接存入state
    setChart(res.data);
  })
  .catch(err => console.error('请求图表数据失败:', err));

若后端未修正，前端需额外解析一次字符串：

setChart(JSON.parse(res.data));

• 正确渲染组件：使用React组件语法条件渲染，而非字符串：

{chart && <Vega spec={chart} />}

验证逻辑 #

修正后，前端state存储的是标准JSON对象，react-vega可直接解析该spec渲染图表，避免了错误数据格式导致的请求头体积过大问题。

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