webpack-dev-server转发的请求为什么无法被charles抓包？

Question

如题，我原来认为proxy应该只是类似于browser <=> webpack-dev-server <=> server这样的形式，webpack-dev-server在中间做一个转发，但是现在看来似乎并不是这样，因为charles只能抓到browser <=> webpack-dev-server这一段请求，而webpack-dev-server <=> server这一段抓不到，请问这是为什么？

Answer 1

没用过charles,不过此类抓包工具应该大都和fiddler一样。

一般来说，抓包工具本身也是个代理服务器，启动抓包工具时，同时会监听一个端口（fiddler监听8888端口），而你启动浏览器时，浏览器进程与抓包工具建立tcp连接，而这个tcp连接的接收端就是 抓包工具占用的端口。

也就是说，抓包工具只能抓到 browser <=> server 之间的请求，而 webpack-dev-server 也是一个服务器，你用到他的代理转发功能，又想能被抓包工具抓到的话，

你需要在webpack-dev-server手动将请求转发到抓包工具，再由抓包工具转发到你想要的服务器。

不然，webpack-dev-server 和抓包工具不存在tcp连接，也就不能被抓包