Скачать или смотреть How to Fix Axios 404 Errors in Your React Application

Troubleshooting axios `404` errors caused by incorrect endpoint URLs in your React application. Learn how to ensure proper requests in your backend and frontend setup with Express and MySQL.
---
This video is based on the question https://stackoverflow.com/q/76119043/ asked by the user 'Ankan Chanda' ( https://stackoverflow.com/u/16082711/ ) and on the answer https://stackoverflow.com/a/76119241/ provided by the user 'Srushti Shah' ( https://stackoverflow.com/u/17786978/ ) 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: AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST'

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.
---
Fixing Axios 404 Errors in Your React Application

If you're developing a web application using React and Express and you encounter an AxiosError indicating a 404 status code like this:

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

this usually means that the requested endpoint cannot be found. In this guide, we will break down the problem and provide a clear solution to resolve this error when using axios and react-hook-form.

Understanding the Problem

When the 404 error arises, it generally suggests that the URL you are trying to hit does not exist on the server. This could happen due to various reasons:

The specified endpoint URL is incorrect.

The server is not configured to handle the request method being sent (like POST).

Network issues that may prevent reaching the server.

Your Server Code

In your server-side code, you have set up a simple Express application to handle user registrations. Here's a crucial part of it:

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

This code sets up an endpoint at http://localhost:5000/users for handling POST requests.

Your Client Code

Your client-side code using axios looks like this:

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

All seems well here, but you're still getting a 404 error.

The Solution

To resolve this issue, follow these steps:

1. Ensure the Endpoint URL is Correct

Make sure you are making requests to the correct URL, and adjust your axios requests based on your Express server configuration. If you ended up naming your route differently or prefixed it with a version (e.g., /api/v1), append that to your URL in the client code.

For example:

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

2. Verify Network Connectivity

If you are running the client and server on the same machine (localhost), ensure both applications are running correctly. You can check this by hitting the endpoints directly in your browser or using tools like Postman to send requests and see the responses.

3. Check Your Server Configuration

If you’re using routes or middleware before your app post method, make sure they are correctly set up.

For example:

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

If you prepend your routes with /api/v1, ensure that your post request URL reflects that.

Conclusion

By following these steps and ensuring that your client-side requests are correctly targeting the right endpoints, you can effectively eliminate the 404 error when using axios.c to interact with your Express server. Always ensure that the URLs match up across your frontend and backend to maintain seamless communication.

Now get back to coding, and happy debugging!