React前端调用Python后端获取笔记遇415(不支持的媒体类型)错误求助

我开发了一款具备创建、保存、搜索功能的笔记管理应用，现在在获取数据库中所有笔记时遇到了415错误，不清楚问题出在哪。

前端app.js代码 #

useEffect(() => {
const fetchNotes = async () => {
  try {
    const response = await axios.get(getNote_URL, {
        email: uEmail,
        withCredentials: true
    });

    console.log('Notes fetched:', response.data); // Display response data
    setNotes(response.data);
  } catch (error) {
    console.log('Error fetching notes:', error);
    console.log(error.response.data.message);
    console.log(error.response.status);
    //console.log(error.response.headers);
  }
};

fetchNotes(); 
}, [getNote_URL, uEmail]);

后端Python代码 #

@app.route('/UpdateNotes', methods=['POST'])
def update_notes():
    data = request.get_json()
    notes = data.get('notes')
    notesid = data.get('notes_id')
    if not notesid:
        return jsonify({'error': 'notes Does Not Exist'}), 400

    with sqlite3.connect(db_path) as conn:
        cursor = conn.cursor()
        update_query = "UPDATE notes set notes = ? WHERE notesid = ?"
        cursor.execute(update_query, (notes, notesid))
        conn.commit()

    return jsonify({'message': 'Notes Saved Successfully'}), 201

# Query to get data from a table, username input and return anything in database
@app.route('/get_Notes', methods=['GET'])
def get_Notes():
    data = request.get_json()
    username = data.get('email')
    if not username:
        return jsonify({'error': 'Users Does Not Exist'}), 400

    with sqlite3.connect(db_path) as conn:
        cursor = conn.cursor()
        get_query = "SELECT notes, notesid FROM notes WHERE username = (SELECT id FROM users WHERE username = ?);"
        cursor.execute(get_query, (username,))
        all_notes = cursor.fetchall()
        conn.commit()
        return jsonify(all_notes)

问题原因及解决方案 #

核心问题 #

1. 前端传参方式错误：axios的GET请求中，直接在配置对象里写email: uEmail是错误的——GET请求的参数应通过params以URL查询参数的形式传递，而非请求体。当前写法会导致axios错误尝试发送JSON请求体，引发Content-Type不匹配。
2. 后端参数获取逻辑错误：get_Notes接口是GET方法，但代码用request.get_json()读取请求体——GET请求本身不携带请求体，后端无法解析数据，直接抛出415错误。

修复步骤 #

1. 修改前端代码

将email参数放到params中，作为URL查询参数发送：

useEffect(() => {
const fetchNotes = async () => {
  try {
    const response = await axios.get(getNote_URL, {
        params: { email: uEmail }, // 参数放入params
        withCredentials: true
    });

    console.log('Notes fetched:', response.data);
    setNotes(response.data);
  } catch (error) {
    console.log('Error fetching notes:', error);
    console.log(error.response?.data?.message || '无错误信息');
    console.log(error.response?.status || '无状态码');
  }
};

fetchNotes(); 
}, [getNote_URL, uEmail]);

2. 修改后端代码

从URL查询参数中读取email，而非请求体，同时优化查询结果格式：

@app.route('/get_Notes', methods=['GET'])
def get_Notes():
    # 从查询参数中获取email
    username = request.args.get('email')
    if not username:
        return jsonify({'error': '用户不存在'}), 400

    with sqlite3.connect(db_path) as conn:
        cursor = conn.cursor()
        get_query = "SELECT notes, notesid FROM notes WHERE username = (SELECT id FROM users WHERE username = ?);"
        cursor.execute(get_query, (username,))
        all_notes = cursor.fetchall()
        # 查询操作无需commit，仅写操作需要
        # 转换为更易处理的字典格式返回
        notes_list = [{'notes': note[0], 'notesid': note[1]} for note in all_notes]
        return jsonify(notes_list)

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