Problem description

Lately learned React, using Charles Mock data. Result API 404.

Configuration process (problem repeat)

The react part

  • The React project runs on port 3000. Locally, access localhost:3000. The following figure shows the API calls in the React component lifecycle

  • API request at http://localhost.:3000/api/todolist

Charles part

  • A JSON file named Todolist is created on the desktop
  • Use Map Local in Charles Tools to simulate HTTP request returns

  • Specific configuration: Map From, including protocol, port number, address, etc. The Local path in Map To is the path To the Local file, which points To the Local todolist.json file

The results of

Project calls to the Charles proxy should work, but the API call results in 404…

Train of thought

  • When I refresh the page in the local area, I find that Charles only grabs the online package, but does not grab my local localhost

  • A fairy (some over-the-counter rescue) said may be the result of Charles upgrade local can try to visit http://localhost.charlesproxy… : 3000
  • The React project is actually running under this magic domain name, and Charles can also catch packages under this domain name

The solution

Map local is also configured under the magic domain name

Now it’s back to normal