树莓派Zero上Flask后端与Vue前端无法连通问题求助

• 最核心的错误是Vue前端请求地址硬编码为http://localhost:3000：当你在树莓派以外的设备（比如你的笔记本、手机）打开前端页面时，localhost指向的是当前访问设备本身，不会请求到树莓派上的Flask服务，自然没有响应。只有在树莓派本机打开浏览器访问前端才会正常工作。
• 次要问题：Flask的relay_handler接口返回值未做变量插值，你写的'Turned {lamp} {state}'没有加f字符串前缀，返回结果会是未替换变量的原始字符串，虽然不影响核心功能，但不符合预期。

1. 修改前端请求地址：
   把fetchAPICall方法里的url配置改为树莓派的局域网IP，例如树莓派IP是192.168.1.100，就改成：

let url = "http://192.168.1.100:3000/" + route

更优雅的方案是使用相对路径，或者配置Vue的环境变量统一管理后端地址，避免后续换IP要改多处代码。
2. 修复Flask返回值插值问题：
把relay_handler里的返回行改成：

return jsonify(result=f'Turned {lamp} {state}'), 200

3. 你提到的curl不加引号报错属于正常现象：shell中?是通配符，不加引号时shell会先尝试匹配本地文件名，找不到对应文件就会报错，加引号是把整个URL作为字符串传递给curl，和你的服务端代码无关。

• 关闭Flask的debug模式：debug=True存在安全隐患，且自动重载机制会导致GPIO重复初始化，自用场景也建议换成debug=False，或者用gunicorn等生产级WSGI服务器运行Flask应用。
• 增加参数校验：所有接口的入参都要做合法性校验，比如relay接口要判断传入的state、light_source是否在允许的取值范围内，避免非法参数抛出KeyError导致接口500报错。
• 修改请求方法：修改硬件状态的接口不要用GET，GET请求是幂等的，容易被浏览器缓存、爬虫误爬触发意外操作，建议换成POST方法，参数放在请求体中传递。
• 增加GPIO清理逻辑：给程序加退出信号处理，退出时调用GPIO.cleanup()重置引脚状态，避免下次启动时引脚状态异常。

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