JavaScript前端与Flask后端无法正确收发Set数据问题

问题核心是JSON.stringify无法直接序列化Set集合。Set的内部数据不会被JSON默认的序列化机制识别，直接转成JSON后就是空对象{}，后端自然拿不到有效数据。

解决步骤： #

1. 前端将Set转为可序列化格式
   把Set转成数组（用[...set]或Array.from(set)），最好封装成对象（方便后端明确字段），再进行JSON序列化。
2. 后端接收并转换为Python集合
   前端传来的是数组，后端拿到后可以直接转成Python的set类型。

修改后的代码示例： #

前端代码

const walls1 = new Set([1, 2, 3]); // 示例非空集合

document.addEventListener('DOMContentLoaded', function(){
    document.querySelector('#search_button').onclick = function(){
        // 把Set转成数组，封装成对象
        const payload = { walls: [...walls1] };
        fetch('http://127.0.0.1:5000/search',{
            method:"POST",
            body: JSON.stringify(payload),
            headers: {
                "Content-Type": "application/json" 
            }   
        })
        .then(response => response.json())
        .then(data => {
            console.log(data);
            console.log(walls1);
        })
    };
});

后端代码

@app.route("/search", methods=["POST"])
def search():
    # 获取前端传来的数组，转成Python集合
    walls_array = request.json.get('walls', [])
    walls_set = set(walls_array)
    
    print(walls_set)  # 现在能正确打印集合内容
    print(request.json)  # 输出示例：{"walls": [1,2,3]}
    
    info = {"success": True}
    return jsonify(info)

补充说明 #

JSON序列化只处理对象的可枚举键值对，而Set没有这类可枚举属性，只有内部存储的元素，所以必须手动转换为数组或其他JSON支持的结构。如果不需要封装对象，直接序列化数组JSON.stringify([...walls1])也可以，后端直接接收request.json即可拿到数组。

内容的提问来源于stack exchange，提问作者Francisco Gutierrez Ramirez