Flask与JavaScript通过fetch API通信无返回JSON问题排查求助

你遇到的所有报错都来自两个核心逻辑不匹配问题：

• 后端返回数据格式与前端预期格式不匹配：你的Flask接口返回的是纯字符串或HTML文本，但前端sendServer函数中强行调用response.json()将响应转为JSON格式，解析失败直接进入catch分支报错。
• 前端请求体序列化错误：你后续去掉JSON.stringify直接传入JS对象作为body的修改是错误的，fetch接收的body如果是JSON格式必须序列化为字符串，否则会被自动转为[object Object]字符串，后端拿到的内容完全不符合JSON格式，才会触发Unexpected token o in JSON at position 1的报错（[object Object]的第二个字符是o，不符合JSON语法）。
• 补充隐藏问题：你当前Flask代码没有正确解析前端传入的JSON数据，request.get_data()拿到的是原始字节流，无法直接读取JSON字段。

后端（app.py）修改 #

将/tmp接口的返回统一为JSON格式，同时正确解析前端传入的JSON参数，修改后post.html不再被调用，可直接删除：

from flask import Flask
from flask import render_template, request, jsonify

app = Flask(__name__)  
 
@app.route('/')  
def home():
    return render_template("index.html")

@app.route("/tmp",methods=['POST'])
def post():
    # 正确解析JSON格式的请求体
    data = request.get_json()
    if not data or 'data' not in data:
       # 失败返回统一JSON格式
       return jsonify({"status": False, "result": "未接收到有效图片数据"})
    # 此处后续可添加图片保存、识别等业务逻辑
    # 测试阶段直接返回成功
    return jsonify({"status": True, "result": "图片接收成功"})
    
if __name__ =="__main__":  
    app.run(debug = True)

前端（index.html）修改 #

1. 恢复JSON.stringify序列化请求体的逻辑，不要直接传JS对象作为body
2. 将绝对路径请求改为相对路径，避免跨域问题
3. 添加响应状态校验，注释掉未定义的setImage函数避免额外报错：

// 发送请求的param逻辑恢复为原来的序列化写法
const param  = {
  method: "POST",
  headers: {
    "Content-Type": "application/json; charset=utf-8"
  },
  body: JSON.stringify({data: pic})
};
// 请求地址改为相对路径
const SAVE_URL = "/tmp";

// sendServer函数优化
function sendServer(url, param){
  fetch(url, param)
    .then((response)=>{
      // 先校验HTTP请求状态是否正常
      if (!response.ok) {
        throw new Error(`HTTP请求失败，状态码：${response.status}`)
      }
      return response.json();
    })
    .then((json)=>{
      if(json.status){
        alert("送信に『成功』しました");
        // 未实现setImage函数可先注释，避免额外报错
        // setImage(json.result);
      }
      else{
        alert("送信に『失敗』しました");
        console.log(`json.status${json.status}`)
        console.log(json)
        console.log(`[error1] ${json.result}`);
      }
    })
    .catch((error)=>{
      alert("送信に『失敗』しました");
      console.log(`[error2] ${error}`);
    });
}

1. 打开浏览器开发者工具的「网络」面板，查看请求的Request Payload是否为标准JSON格式，响应的Response内容是否符合JSON语法
2. 后端可添加print(data)语句打印接收到的请求参数，确认是否成功拿到前端传入的图片base64数据
3. 前后端提前约定统一的响应格式，所有接口返回保持结构一致，避免出现部分接口返回JSON、部分返回HTML的情况

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