使用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 再次刷新网页，查看是否成功

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容