React+Fiddler 本地抓包调试步骤+注意事项

react小白+fiddler小白

总之先用cmd把react写的网页跑起来

一般端口是3000，这个记着，抓包会用到。

这是react中用ajax实现get传输数据的代码部分。简单来说就是发送一个get请求到本地 /api/data.json 文件，然后获取数据返回。

 

写的就是一个极其简单的页面。现在可以看到，显然所要请求的 data.json 报404错误，ajax请求也转入catch()内，弹出no，请求失败。

 

 

下面Fiddler本地抓包实现前后端数据传输的调试：

随便在电脑哪个位置新建一个 data.json 文件，内容如下：

['1', '2', '3']

简简单单一个jason数组，最终目的就是把它们一个个在页面里列出来。

by the way，react项目中ajax部分最好是写在 componentDidMount() 函数里。因为这个函数会在 render() 函数之后执行，且只执行一次，而 render() 会根据数据变化而多次执行，这样写避免了多次发送ajax请求。

打开Fiddler，如图抓到的一系列请求里，找到 Host下为 localhost:3000 且最前面有红色感叹号（显然是响应有问题）的

右边点 AutoResponder 进行配置

然后在页面里刷新一下，ok

响应没有问题

 

注意事项：

在Fiddler的最最左下角

只有有这个标志才说明Fiddler在行使作用，否则他并未起作用，像这样是不起作用的

可以点击该处开启/关闭Fiddler的作用。

另外，如果Fiddler正在起作用，此时想修改网页貌似是不行的。具体原因我也不知道。