使用Charles实现本地数据mock

缺乏、安全感 2023-07-05 14:52 193阅读 0赞

# 使用Charles实现本地数据mock #

![format_png][]

### 一、老版本Charles使用 ###

1.  准备Charles工具,没有的话去下载([https://www.charlesproxy.com/latest-release/download.do][https_www.charlesproxy.com_latest-release_download.do])，如下图这玩意![image.png][]
2.  js发送axios请求
    
    ![image.png][image.png 1]
3.  桌面新建mock文件(不一定要桌面，其他位置也可以，只要记住就行)
    
    ![image.png][image.png 2]
    
    ![image.png][image.png 3]
4.  打开charles,步骤如下
    
    ![image.png][image.png 4]
5.  勾选Enable Map Local,然后点击Add
    
    ![image.png][image.png 5]
6.  根据项目运行地址填写端口号
    
    ![image.png][image.png 6]
    
    ![image.png][image.png 7]
7.  勾选，然后ok
    
    ![image.png][image.png 8]
8.  刷新浏览器，如果接口正常返回200，那么恭喜你，你的版本属于比较低的，如果接口还是报404，那么继续往下看吧

### 二、新版本如何使用？ ###

方案一：把之前的host的locahost改成ip,项目使用ip访问即可。

![image.png][image.png 9]

![image.png][image.png 10]

方案二 把之前的locahost改为localhost.charlesproxy.com

![image.png][image.png 11]

![image.png][image.png 12]

到这里，mock文件的内容也能读取到了。你学会了嘛？

![image.png][image.png 13]![image.png][image.png 14]

### **总结：Charles老版本不在支持Host为localhost访问本地文件，可以使用ip进行访问,如果一定要用localhost，请使用映射localhost.charlesproxy.com** ###

## ##

![format_png 1][]

![format_png 2][]

![format_png 3][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy83UVJUdmtLMnFDNHZuendhSmRIYzROYzF4b1p2dEt3V0w5Q0x1V2J5YlpUcUZpYVBQY0c1TUsyYzZhem1aVUZaV2pTVmUyQmF6aWFxc1RGNXE2RW5UenZBLzY0MA?x-oss-process=image/format,png
[https_www.charlesproxy.com_latest-release_download.do]: https://www.charlesproxy.com/latest-release/download.do
[image.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9iZG4uMTM1ZWRpdG9yLmNvbS9maWxlcy91c2Vycy83OTMvNzkzMzU4Ni8yMDIwMDIvRzlRYkp3RmRfV003Ny5wbmc?x-oss-process=image/format,png
[image.png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9iZG4uMTM1ZWRpdG9yLmNvbS9maWxlcy91c2Vycy83OTMvNzkzMzU4Ni8yMDIwMDIvRXJEWXJDZVRfZHU5ay5wbmc?x-oss-process=image/format,png
[image.png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9iZG4uMTM1ZWRpdG9yLmNvbS9maWxlcy91c2Vycy83OTMvNzkzMzU4Ni8yMDIwMDIvdk11OVJ3bkpfTERrYy5wbmc?x-oss-process=image/format,png
[image.png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9iZG4uMTM1ZWRpdG9yLmNvbS9maWxlcy91c2Vycy83OTMvNzkzMzU4Ni8yMDIwMDIvU2VoWXgzTXFfeWt2YS5wbmc?x-oss-process=image/format,png
[image.png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9iZG4uMTM1ZWRpdG9yLmNvbS9maWxlcy91c2Vycy83OTMvNzkzMzU4Ni8yMDIwMDIvZWtSNWRnQXJfbk43QS5wbmc?x-oss-process=image/format,png
[image.png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9iZG4uMTM1ZWRpdG9yLmNvbS9maWxlcy91c2Vycy83OTMvNzkzMzU4Ni8yMDIwMDIvZzdEeWRuUTlfMk9GOC5wbmc?x-oss-process=image/format,png
[image.png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9iZG4uMTM1ZWRpdG9yLmNvbS9maWxlcy91c2Vycy83OTMvNzkzMzU4Ni8yMDIwMDIvdWNnOGF0QTJfTG5YbS5wbmc?x-oss-process=image/format,png
[image.png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9iZG4uMTM1ZWRpdG9yLmNvbS9maWxlcy91c2Vycy83OTMvNzkzMzU4Ni8yMDIwMDIvQklkcmpaT2dfS1pBbS5wbmc?x-oss-process=image/format,png
[image.png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9iZG4uMTM1ZWRpdG9yLmNvbS9maWxlcy91c2Vycy83OTMvNzkzMzU4Ni8yMDIwMDIvZlV0ZFVBNEtfdFloOS5wbmc?x-oss-process=image/format,png
[image.png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9iZG4uMTM1ZWRpdG9yLmNvbS9maWxlcy91c2Vycy83OTMvNzkzMzU4Ni8yMDIwMDIvdzJNTnNQU2dfbkZ6dC5wbmc?x-oss-process=image/format,png
[image.png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9iZG4uMTM1ZWRpdG9yLmNvbS9maWxlcy91c2Vycy83OTMvNzkzMzU4Ni8yMDIwMDIvVjV0YlB4UEdfa25hYi5wbmc?x-oss-process=image/format,png
[image.png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9iZG4uMTM1ZWRpdG9yLmNvbS9maWxlcy91c2Vycy83OTMvNzkzMzU4Ni8yMDIwMDIvZldURVlrNE1fUk5UUC5wbmc?x-oss-process=image/format,png
[image.png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9iZG4uMTM1ZWRpdG9yLmNvbS9maWxlcy91c2Vycy83OTMvNzkzMzU4Ni8yMDIwMDIvSTNZaHhJT2pfNHU0ei5wbmc?x-oss-process=image/format,png
[image.png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9iZG4uMTM1ZWRpdG9yLmNvbS9maWxlcy91c2Vycy83OTMvNzkzMzU4Ni8yMDIwMDIvdHd6Y2JUWGpfYlJtci5wbmc?x-oss-process=image/format,png
[image.png 14]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9iZG4uMTM1ZWRpdG9yLmNvbS9maWxlcy91c2Vycy83OTMvNzkzMzU4Ni8yMDIwMDIvU01rWnBGa1lfOXU1dy5wbmc?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy83UVJUdmtLMnFDNDJRTmV1TE9PRUU2YkNHNTk1QWFoaWNJUGZOUDdzdGdiM01Ca1RpYzZld3JoYzc2UWljaWFNZ1RGRHU0d3Bub1l5cGN2OFdHV3pBWkQxTVEvNjQw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL3N6X21tYml6X2pwZy9LU3lZZVBESjVIdXljVFN3S0swRGt6TWY0bUVYdmtDU0JodkZqT291WlB2UWZpY0pKYTNiQ3BWcVgwcmtuR0lqMFFLMFJYWVJlelNZaGljM1dhNlJ6OG93LzY0MA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy83UVJUdmtLMnFDNXJsamVCdzhPSGxSajNGeEU2N3RYOE9FQUVzTU43VWNMTngwemMzZnJVeDA0U2liYjNsbU11d3RZS0UwUGliQzJLdHFRbnp2dkhIaWFNUS82NDA?x-oss-process=image/format,png