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正在起作用,此时想修改网页貌似是不行的。具体原因我也不知道。