React向Flask API发送POST请求：CSV转JSON方案咨询

问题根源 #

你直接将CSV文本作为POST请求体发送，但后端用request.get_json()尝试解析JSON格式数据，而CSV是纯文本格式，导致解析失败触发500错误。

方案一：前端将CSV转JSON后发送（无第三方库） #

如果不想依赖Papaparse，可以自己实现简易的CSV转JSON逻辑（适用于字段不含逗号、换行的常规CSV）：

前端代码修改 #

// 简易CSV转JSON函数（假设CSV首行为表头）
const csvToJson = (csv) => {
  const lines = csv.split('\n').filter(line => line.trim());
  if (lines.length === 0) return [];
  const headers = lines[0].split(',').map(h => h.trim());
  return lines.slice(1).map(line => {
    const values = line.split(',').map(v => v.trim());
    return headers.reduce((obj, header, idx) => {
      obj[header] = values[idx];
      return obj;
    }, {});
  });
};

const handleSubmit = async (event) => {
  event.preventDefault();
  const csvText = event.target.returns.value;
  try {
    const jsonData = csvToJson(csvText);
    const response = await axios.post('http://127.0.0.1:5000/ratios', jsonData);
    console.log(response.data);
    setShow(true);
  } catch (err) {
    console.error('请求出错:', err);
  }
};

后端代码保持 #

后端直接接收JSON并转为DataFrame：

from flask import request
import pandas as pd

@app.route('/ratios', methods=['POST'])
def ratios():
    json_data = request.get_json()
    df = pd.DataFrame(json_data)
    # 后续处理逻辑...
    return df.to_json(orient='records')

方案二：后端接收CSV文本并解析 #

如果更倾向于后端处理CSV解析，前端只需发送原始CSV文本：

前端代码修改 #

设置请求头为text/plain，确保后端能正确识别文本格式：

const handleSubmit = async (event) => {
  event.preventDefault();
  const csvText = event.target.returns.value;
  try {
    const response = await axios.post('http://127.0.0.1:5000/ratios', csvText, {
      headers: {
        'Content-Type': 'text/plain'
      }
    });
    console.log(response.data);
    setShow(true);
  } catch (err) {
    console.error('请求出错:', err);
  }
};

后端代码修改 #

用pandas读取原始CSV文本并转为JSON：

from flask import request
import pandas as pd
from io import StringIO

@app.route('/ratios', methods=['POST'])
def ratios():
    # 读取请求体中的CSV文本
    csv_content = request.data.decode('utf-8')
    # 转为DataFrame
    df = pd.read_csv(StringIO(csv_content))
    # 转为JSON格式返回
    return df.to_json(orient='records')

补充说明 #

如果需要处理含复杂格式的CSV（比如字段包含逗号、双引号、换行）：

• 前端可使用轻量浏览器端库csv-js替代手写解析
• 后端可使用csv库配合StringIO做精细化解析，避免pandas默认处理的潜在问题

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