我在网站写了这样一个功能:
前端页面有三个文本框和一个提交按钮,点击后将信息发送给后端并保存到数据库。
在开发阶段,我的前端代码是这样写的:
fetch('http://localhost:3000/api/submit', ...)
意思是将信息发送到本地3000端口,在开发阶段,这里没问题。
因为就是在本地开发的。
然而,项目上线后,这个提交功能却直接失效了。经过排查才恍然大悟:前端代码是下载到用户的浏览器中执行的。 如果在代码里写死 localhost,用户的浏览器就会去请求他们自己电脑上的 3000 端口,而不是我的线上服务器。
现在问题已经解决
写成这样就行了:
fetch('/api/submit', ...) 这样浏览器会自动将当前网页的线上域名拼接到请求前面。
虽然问题很简单,但是暴露出一个很严重的问题,如果项目发生错误,我根本没有能力去调试,甚至不知道问题会在什么地方。
好在现在还没有去上班。