Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

前后端分离后的前端程序调试

  前面的文章中纠结过一堆环境配置管理的问题。这些环境不仅要维护,可能还需要调试。最典型的问题就是生产环境突然出了问题,由于前端代码是压缩的,调试就很麻烦。这时如果可以直接用开发环境的前端程序来调用生产环境的 API 就能很容易找到问题所在。
  一个最简单的做法是修改本地的 hosts 文件,将生产环境的域名指向自己。然后自己搭建 Web 服务,这样就可以使用本地程序来跑生产环境的域名了。但只是换了域名可能还不够,因为有时候我们解决 API 的跨域问题是在原域名上开一个子目录反向代理到 API 服务器的。所以如果本地搭建 Web 服务就需要把反向代理的目标服务器指向生产环境。
  上面的做法是可行的,我以前就经常这么干。但是每次切换环境需要修改 hosts 甚至要修改 nginx 配置,那就非常麻烦了。我自己能搞定这些配置不代表所有人都可以,因为有些前端开发者根本不知道 nginx 是什么鬼,更不可能知道反向代理是什么原理了。所以这么麻烦的做法很难普及,于是我有搞了个稍微简单的做法:为测试环境配置单独的域名。这样一次配好就可以在测试环境和生产环境的 API 之间直接切换了,不需要重新配置。于是大家都学会了如何使用本地程序调试生产环境的 API。
  这个方案用了一段时间后发现还有坑,有些生产环境的 API 会写 Cookie,由于调用生产环境的 API 时使用了奇怪的域名,于是服务器响应的 Set-Cookie 就无法生效了。为了解决这个问题,我放弃了 nginx 直接的反向代理(虽然 nginx 配置中写点 lua 脚本也能实现,但是要重新编译 nginx 太麻烦了),用 nodejs 重新做了一层 http 代理,在里面处理的 API 服务器响应的 Set-Cookie 字段,将其域名部分替换成浏览器访问的域名。虽然连我自己都觉得这是黑魔法,但确实解决了调试接口时的 Cookie 跨域问题。
  经过一系列的折腾之后确实已经没有什么坑了,只是要实现上面这些东西可能要写点程序。但我相信大家自己也能分分钟写出来,我就不贴代码了(其实是因为写得太烂不好意思贴出来)。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^