### Flask 接收 Vue3 GET 请求参数时出现 `[object PointerEvent]` 的解决方案 在 Vue3 中，GET 请求通常通过 URL 查询字符串传递参数。然而，如果在发送请求时未正确处理参数，可能会导致 Flask 后端接收到类似 `[object PointerEvent]` 的异常值。以下是问题的可能原因及解决方案： #### 1. **Vue3 端的问题分析** Vue3 中的事件绑定可能导致参数被错误地设置为事件对象，而不是实际需要传递的数据。例如，在以下代码中： ```javascript axios.get('http://localhost:5000/vueflask', { params: event }) ``` 如果 `event` 是一个 DOM 事件（如点击事件），那么它会被序列化为 `[object PointerEvent]` 并传递给后端[^4]。 #### 2. **正确的参数传递方式** 为了确保参数正确传递，应该显式指定需要发送的数据，而不是直接使用事件对象。例如： ```javascript methods: { fetchData() { const data = { key: 'value' }; // 替换为实际需要传递的数据 axios.get('http://localhost:5000/vueflask', { params: data }) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); } } ``` #### 3. **Flask 端的接收方式** 在 Flask 后端，可以通过 `request.args` 获取 GET 请求中的查询参数。例如： ```python from flask import Flask, request, jsonify app = Flask(__name__) @app.route('/vueflask', methods=['GET']) def vueflask(): key = request.args.get('key', '') # 获取名为 'key' 的查询参数 return jsonify({'received': key}) ``` #### 4. **调试与验证** 为了验证问题是否解决，可以在 Vue3 和 Flask 中分别添加日志输出： - 在 Vue3 中打印发送的参数： ```javascript console.log('Sending:', data); // 打印实际发送的参数 ``` - 在 Flask 中打印接收到的参数： ```python print('Received:', request.args) ``` #### 5. **完整示例** 以下是完整的 Vue3 和 Flask 示例代码： **Vue3 部分：** ```javascript <template> <div> <button @click="fetchData">发送 GET 请求</button> </div> </template> <script> import axios from 'axios'; export default { name: "Door", methods: { fetchData() { const data = { key: 'value' }; // 替换为实际需要传递的数据 axios.get('http://localhost:5000/vueflask', { params: data }) .then(response => { console.log('Response:', response.data); }) .catch(error => { console.error('Error:', error); }); } } }; </script> ``` **Flask 部分：** ```python from flask import Flask, request, jsonify app = Flask(__name__) @app.route('/vueflask', methods=['GET']) def vueflask(): key = request.args.get('key', '') # 获取名为 'key' 的查询参数 print('Received:', key) # 打印接收到的参数 return jsonify({'received': key}) if __name__ == '__main__': app.run(debug=True) ``` ### 注意事项 - 确保 Vue3 和 Flask 的跨域问题已解决，可以使用 Flask-CORS 扩展。 - 如果问题仍然存在，请检查浏览器控制台和 Flask 日志以定位具体原因。