使用Charles实现本地数据mock设置及出现404的问题解决

一 、使用Charles实现本地数据mock方法

• 1.安装Charles 教程请看 https://www.jianshu.com/p/543ad8ef3ceb
• 2.打开Charles
  到菜单 Tool ——> Map Local Setting里设置

• 3.设置完成后点击OK

  
  Map Local Setting1
  Map Local Setting2
  Map Local Setting3
  

  至此，mock设置成功，在代码中编写请求数据的方法

   componentDidMount() {
        axios.get('/api/abc')
        .then(()=>{
            alert('succ')
        })
        .catch(()=>{
            alert('error')
        })
    }

到页面command + R 刷新，查看请求结果

二、404问题解决

这里给出几种方案供参考

• 1 将上面的Map Local Settings 中填写的localhost更换成localhost.charlesproxy.com
  localhost.charlesproxy.com1
  localhost.charlesproxy.com2

同时网页端请求接口也更换成 localhost.charlesproxy.com:3000 注意冒号是英文冒号，刷新重试，如果还是不成功，试试下面的方法

• 2 将上面的Map Local Settings 中填写的localhost更换成自己网络的ip，本机ip获取方法，打开Charles，菜单栏选择help ——> Local IP Address
  ip1
  ip2
  更换后

ip3
同时在网页的地址中也要更改成你的 ip+:3000， 例如192.168.30.223:3000，重新 command + R 刷新

• 3 如果还不成功，查看Charles配置

  • ① 查看菜单栏 Proxy ——> macOS Proxy 是否勾选，未勾选点击勾选

    
    

• ② 查看Charles证书是否受信任
  打开证书方式，菜单栏 Help ——> SSL Proxying ——> Install Charles Root Certificate 打开钥匙串，双击Charles的证书

  
  信任1
  信任2
  

  重启Charles 再次刷新网页，查看是否成功

以上，如果还是不能解决问题，请百度搜索其他方法，或者找大牛帮忙！！！