前端开发必备nginx+fiddler实现本机调试

对于前端开发而言，通常依赖后端接口，依赖浏览器调试，也依赖手机调试。在发布测试、发布生产之前，总希望在本机跑通，这样提交到测试、生产才不至于被K。但是同域名的要求，还有一些做混合开发的，如在微信公众号上开发，需要运行在手机上，总会限制我们。这里介绍一种方法，通过nginx、fiddler来尽可能实现本地调试，以此来方便前端工程师。

常见WEB架构如下，前端工程师掌握着如下图淡蓝色部分的【01浏览器】、【02WEB服务器/前端】，并依赖【03WEB服务器/服务】（通常是后端工程师掌握）来获取云端数据或服务。

考虑到安全问题，浏览器一般对前端所在的web服务器和服务所在的wen服务器有一个要求，就是根域名应该一致，就是页面如果在A域名，那么只能调用A域名下的服务，否则就被认为是跨站请求，会有一些安全访问的约束。也因此，我们通常要将他们挂在同一个域名下，这样就引入了代理神器nginx。

Nginx提供了代理的作用，可以将https转向到http，成为对外服务的统一界面。也因为nginx足够稳定、性能足够好、足够牛，【02 WEB服务器/前端】也被nginx收编了。而【03WEB服务器/服务】则主要是用一些后端框架来替换，各种各样的WEB服务服务框架随着不同的语言推出，例如Apache、Tomcat、Jetty、Express、Django、gRPC等那时相当的多。另外还有websocket的应用，也有一些新的扩展，如mqtt与websocket的结合，也有一些服务直接使用nignx模块编程。但无论如何，只是03更加的多了，浏览器始终还是可以直接与代理来打交道。

说了这么多，就只有一个，nignx可以用来收拢后台工程师开发的各式各样的服务接口，只要是提供了http，ws访问界面的，都能搞定。这样你就可以自己使用ngixn搭建一个web服务代理，解决掉跨域名访问和调试的问题了。

那么这里提到的Fiddler用来干嘛呢？我们通常使用浏览器的插件来调试，但是手机浏览器应该不好搞插件吧，如何看前端和后端的交互呢？就用到了Fiddler，这是windows下的代理神器，可参考我的文章【用Fiddler做WEB服务与页面分析，以及自动化任务】

Tags：前端调试

微信扫一扫：分享

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。