Mac版Charles Map Local失效解决办法，解决axios请求报404问题（完整步骤）

落日映苍穹つ 2024-04-18 23:38 3阅读 0赞

# 问题提出 #

最近学习React过程中，写axios请求时，需要使用Charles重定向，反复报404错误。通过查阅Charles文档、StackOverflow相似情况回答，完整解决。有同样问题的朋友，可以跟着本文一步步操作，如果依然有问题，欢迎在下方评论区交流！

axios请求代码块：

componentDidMount() {
            axios.get('/api/todolist').then((res) => {
                alert('success');
            }).catch((err) => {
                alert('error');
            });
    }

使用Charles Map Loacl重定向：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70][]

todolist.json文件内容如下，随意写的，很普通：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 1][]

刷新浏览器后报错：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 2][]

查看控制台Network，todolist请求报404错误：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 3][]

查看Charles，没有抓取本地请求，空空如也：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 4][]

# 问题分析 #

Charles文档中找到了对Localhost的相关说明，附上链接：[https://www.charlesproxy.com/documentation/faqs/localhost-traffic-doesnt-appear-in-charles/][https_www.charlesproxy.com_documentation_faqs_localhost-traffic-doesnt-appear-in-charles]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 5][]

Charles原理是把自身变为一个中间代理服务器，便于抓包。文档大意是某些系统会采用硬编码方式使本地的数据访问不使用代理，导致无法使用Charles重定向。官方给出的解决方案是使用[http://localhost.charlesproxy.com/][http_localhost.charlesproxy.com]替代localhost。

再来看看StackOverflow上相关回答，附上链接：[https://stackoverflow.com/questions/15183108/view-127-0-0-18080-traffic-in-charles-proxy][https_stackoverflow.com_questions_15183108_view-127-0-0-18080-traffic-in-charles-proxy]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 6][]

解决方案与官方给出的相同，使用[localhost.charlesproxy.com][http_localhost.charlesproxy.com]替代localhost。

# 解决问题 #

下面根据分析解决此问题。

首先，修改axios代码块中get的url（为什么[http://localhost.charlesproxy.com][http_localhost.charlesproxy.com]后面要加:3000呢？因为我们使用的是3000端口）：

componentDidMount() {
            axios.get('http://localhost.charlesproxy.com:3000/api/todolist').then((res) => {
                alert('success');
            }).catch((err) => {
                alert('error');
            });
    }

随后，修改Charles中Map Local设置（只需要把Host栏改成[localhost.charlesproxy.com][http_localhost.charlesproxy.com]即可）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 7][]

然后刷新浏览器（嗯？还是报错）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 8][]

我们来看网页地址：

![20190914114800294.png][]

地址还是localhost，需要手动输入新地址[localhost.charlesproxy.com:3000][localhost.charlesproxy.com_3000]

![20190914115004915.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 9][]

问题解决！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8a19dd1c7d544d89aa7e25cd1ce46de9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/7cfe95bda6a5469a88adecfb3b2dbf4f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/72248c07e5574b8f9362941a7583d219.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/5b7e1bd9a5e24ff9a7942fb2150f097b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/28219f4e9cea4f048418b1d9a5fc6db6.png
[https_www.charlesproxy.com_documentation_faqs_localhost-traffic-doesnt-appear-in-charles]: https://www.charlesproxy.com/documentation/faqs/localhost-traffic-doesnt-appear-in-charles/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/da7d768b5b1541aeb116dd0f682db02f.png
[http_localhost.charlesproxy.com]: http://localhost.charlesproxy.com/
[https_stackoverflow.com_questions_15183108_view-127-0-0-18080-traffic-in-charles-proxy]: https://stackoverflow.com/questions/15183108/view-127-0-0-18080-traffic-in-charles-proxy
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/6166c0aa580d49e9bab6fe63a19e4f37.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/954536d76ccb427b9634d801ca056bb5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8893a5e4c791429b859d350f07df08d8.png
[20190914114800294.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/540fb324b0774787adbc73b27bd4f7fa.png
[localhost.charlesproxy.com_3000]: http://localhost.charlesproxy.com:3000/
[20190914115004915.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/a99ebd4d56284138be42cde0398303ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/932b9b028af2484cac1d6d53db73f3f7.png