使用charles模拟ajax请求

在我们日常开发过程中经常会遇到页面开发完成，但是由于接口进度较慢无法拿到数据。此时我们就会想先模拟一些数据，让页面运行起来，当接口开发完成，直接将接口地址替换上去即可。而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请求