Vue向Flask发送筛选后数据，Flask无法读取JSON的问题求助

问题根源 #

1. Vue端手动使用JSON.stringify()序列化数据，但未设置Content-Type: application/json请求头，导致Flask无法识别请求体的JSON格式
2. Flask端用request.values获取数据，这个方法仅适用于读取URL参数或表单数据，无法解析JSON格式的请求体

Flask端代码修复 #

首先确保导入request模块，然后将获取数据的方式改为request.get_json()，同时增加基础数据校验：

from flask import Flask, jsonify, request  # 补充导入request模块
app = Flask(__name__)
app.config.from_object(__name__)
CORS(app, resources={r"/*":{'origins":"*"}})

# Sending data to http://localhost:5000/prices
@app.route("/prices", methods=["GET","POST"])
def all_prices():
    dt_items = init_data()
    json_items = prepare_data_for_front(dt_items)
    return jsonify({"items" : json_items})

# Retrieve data from http://localhost:8085/saved 
@app.route("/saved", methods=["POST"])  # 仅保留POST方法即可
def all_select():
    dt_saved = request.get_json()
    # 校验是否获取到有效JSON数据
    if not dt_saved:
        return jsonify({"error": "未接收到有效JSON数据"}), 400
    # 此处可将dt_saved作为Python对象进行存储（如存入列表、数据库等）
    print("已接收数据:", dt_saved)
    return jsonify(dt_saved)

app.run()

Vue端代码修复 #

无需手动序列化数据，axios会自动将JavaScript对象转为JSON并设置正确请求头，简化postItems方法：

import axios from 'axios';

export default {
...
methods: {
    async postItems() {
        await axios.post("http://localhost:5000/saved", this.filteredTable)
        .then(response => {
            console.log(response.data);
        })
        .catch(err=>{
            console.log(err);
        });
    },
...
}

如果必须手动序列化数据，需显式设置请求头：

async postItems() {
    await axios.post("http://localhost:5000/saved", JSON.stringify(this.filteredTable), {
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => {
        console.log(response.data);
    })
    .catch(err=>{
        console.log(err);
    });
}

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