Скачать или смотреть Resolving axios cannot get public/[name].json Issue in ReactJS

Discover how to fix the `404 Not Found` error with axios for your JSON files in ReactJS by correctly setting the path to your public folder.
---
This video is based on the question https://stackoverflow.com/q/63778356/ asked by the user 'Kola' ( https://stackoverflow.com/u/14222497/ ) and on the answer https://stackoverflow.com/a/63778454/ provided by the user 'Hossein Ahmadi' ( https://stackoverflow.com/u/11752942/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: axios cannot get public/[name].json folder in reactjs

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding the Problem: axios Cannot Get public/[name].json Folder in ReactJS

Have you ever encountered an issue where your ReactJS application is unable to fetch a JSON file from the public folder? This problem can be frustrating, especially when everything appears to be set up correctly. In this guide, we’ll dive into a specific case where an axios request returns a 404 Not Found error when trying to access a JSON file, and we will explore the solution step by step.

The Scenario

In a typical ReactJS project, users may want to fetch data from JSON files located in the public folder. In the provided example, we have:

A public folder containing items.json

An Overview.tsx component that makes an axios call to retrieve the data from items.json

However, upon executing the code, users encounter the following error in their console:

[[See Video to Reveal this Text or Code Snippet]]

This error indicates that the file could not be found at the specified path. Let's understand why this happens and how we can resolve it.



Why Does This Error Occur?

The root cause of the issue lies in how axios interprets relative paths. When using relative paths, the fetch request originates from the current path of the webpage. In your case, the relative path items.json is being interpreted as:

[[See Video to Reveal this Text or Code Snippet]]

Instead of accessing it from the root of your application, axios is looking in the wrong directory, leading to the 404 error.



The Solution: Updating the Axios Call

To resolve this issue, you need to modify the axios call in your Overview.tsx file. Here’s how you can do it:

Change the Code Inside useEffect

Replace your current axios function with the following:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Change

Leading Slash: By adding a leading slash in /items.json, you are instructing axios to fetch the file from the root of the public folder, effectively changing the request URL to:

[[See Video to Reveal this Text or Code Snippet]]

Why This Works: This adjustment ensures that the request targets the appropriate location, where items.json is located, eliminating the risk of navigating through incorrect paths.



Conclusion

By modifying the axios request to include a leading slash, fetching JSON files in your ReactJS application becomes straightforward, ensuring that you avoid 404 Not Found errors. Always remember to check the paths when making API calls to avoid unnecessary hiccups in your development process.

If you continue to experience issues, double-check the structure of your folders and make sure your JSON files are correctly placed and accessible.



Happy coding! Feel free to reach out with any further questions or comments below.