Vercel部署的NextJS生产应用调用本地Flask服务异常排查

核心原因 #

你遇到的情况本质是请求发起位置的混淆：

• 如果请求写在NextJS的客户端组件/浏览器端代码里（比如用fetch、axios在前端页面中发起），localhost:5000是相对于当前打开浏览器的用户设备，而非Vercel的服务器。刚好你的电脑上运行着Flask服务，浏览器就会把请求发送到本地5000端口，自然触发了本地服务。
• 只有请求在NextJS服务端环境发起（比如getServerSideProps、API路由内部的请求）时，localhost才会指向Vercel的服务器，此时请求才会失败。

解决步骤 #

• 确认请求发起位置：检查请求代码是在带'use client'指令的客户端组件中，还是服务端组件/API路由里。
• 用环境变量区分环境：在Vercel后台配置生产环境的后端地址环境变量（比如NEXT_PUBLIC_API_URL），开发环境在.env.local里设置为http://localhost:5000，生产环境设置为后续Flask部署后的线上域名。代码中通过process.env.NEXT_PUBLIC_API_URL拼接请求地址，避免硬编码localhost。
• 验证结论：换一台没运行Flask服务的设备打开线上NextJS应用，此时请求会直接失败，即可确认问题根源是客户端请求指向了你本地的机器。

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