關於Charles mock前端數據404問題

問題描述

最近學習react，使用Charles mock數據。結果API 404。

配置過程 (問題復現)

react部分

• react項目運行在本地 3000端口，本地訪問localhost:3000, 下圖是在react組件中 生命週期裏API的調用

• API請求地址 http://localhost.:3000/api/todolist

Charles部分

• 在桌面建立了一個名爲todolist的JSON文件
• 在Charles裏Tools下 使用map local來模擬http請求返回

• 具體配置：Map From,包含協議、端口號、地址等；Map To裏 Local path就是本地文件的路徑，在這裏指向了本地的todolist.json

結果

項目裏調用，Charles代理，應該是能夠了的，可是 API調用結果404...

思路

• 在本地瘋狂刷新頁面，發現Charles 只抓取了線上的包，並無抓取到我本地localhost的

• 有個神仙(某種場外救援)說多是Charles升級致使的 本地能夠嘗試訪問http://localhost.charlesproxy...:3000
• 嘗試訪問了下 發現react項目真的也運行在這個神奇的域名下，Charles也能夠抓到這個域名下的包

解決方法

map local也配置在這個神奇的域名下就能夠了

如今返回正常了