在我们日常开发过程中经常会遇到页面开发完成，但是由于接口进度较慢无法拿到数据。此时我们就会想先模拟一些数据，让页面运行起来，当接口开发完成，直接将接口地址替换上去即可。而charles正好可以满足我们这些需求。
charles是什么
Charles是HTTP代理/ HTTP监视器/反向代理，使开发人员可以查看其计算机与Internet之间的所有HTTP和SSL / HTTPS通信。这包括请求，响应和HTTP标头（其中包含cookie和缓存信息）。
charles如何使用
axios.get("http://localhost:3000/list.json").then(res => {
console.log("res", res);
});
然后我们通过charles代理此地址具体步骤打开charles：Tools=>Map Local（如图-代理配置）
代理配置
结果发现接口依然报404。这是为什么呢？
发现问题--charles配置方式的改变
我们打开charles官网地址https://www.charlesproxy.com/documentation/faqs/localhost-traffic-doesnt-appear-in-charles/，发现charles的配置方式发生了一定的改变
charles配置方式更改
我们需要将接口地址 http://localhost/改为新的 http://localhost.charlesproxy.com/
于是我们在charles中重新配置如下：
charles新配置方式
同时更改我们的调用方式
componentDidMount() {
axios.get("http://localhost.charlesproxy.com:3000/list.json").then(res => {
console.log("res", res);
const data = res.data;
this.setState(
{
list: data
},
() => {
console.log("this.state", this.state);
}
);
});
}
在浏览器刷新页面发现，接口调用成功！
接口调用成功
此时，我们就成功的使用charles代理模拟了ajax请求
