Solving the ERR_BAD_REQUEST Axios Error: A Guide for React and Strapi Developers

Discover how to fix the `ERR_BAD_REQUEST` Axios error you're encountering in your eCommerce website built with React and Strapi. Learn about possible causes and solutions.
---
This video is based on the question https://stackoverflow.com/q/75689763/ asked by the user 'Emilio Alcántara' ( https://stackoverflow.com/u/21366311/ ) and on the answer https://stackoverflow.com/a/75689822/ provided by the user 'edjav' ( https://stackoverflow.com/u/14362044/ ) 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: code : "ERR_BAD_REQUEST" Axios error: Request failed with status code 404

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

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding the ERR_BAD_REQUEST Axios Error in React and Strapi

Building an eCommerce website using React and Strapi is an exciting project that can also be challenging. One common issue developers may encounter is the ERR_BAD_REQUEST Axios error, particularly when trying to fetch data from Strapi. In this post, we'll dive into this problem and provide a comprehensive solution that will help you resolve the error effectively.

The Problem

While developing your application, you may face an error similar to the following:

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

This error indicates that the application is trying to make a GET request to a URL that is incomplete or incorrect, specifically, it’s showing undefined in the request URL. This is a clear sign that something is wrong with how the URL is being constructed.

Diagnosing the Issue

Analyzing the URL

Notice that the failing URL includes /undefined/ which suggests that there's a part of the URL that is not properly defined. This is the area we need to investigate to understand the functionality of the API call within your application.

Logging the URL

To diagnose the issue further, you can add a console.log statement in your fetchDataFromApi function to see what URL is being passed to the Axios GET request. Here’s how you can implement it:

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

By logging the complete URL, you can determine if the url parameter is being passed correctly or if it is resulting in undefined.

The Solution

Fixing the Undefined Value

Check the Environment Variables: Ensure that your environment variable REACT_APP_STRIPE_APP_DEV_URL is correctly defined in your .env file:

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

Make sure that this URL ends correctly without unintended trailing slashes or characters.

Examine Function Calls: Check the places where you are calling fetchDataFromApi to ensure that a valid URL path is provided. For instance:

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

Ensure the path starts with a /, otherwise it may concatenate improperly, leading to a undefined value.

Debug Outputs: After making the changes, test to see if the URL structures correctly in your console logs. If the URL is constructed properly without undefined, you should be able to access your product and category data successfully.

Conclusion

By understanding the structure of your API calls and properly logging your variables, you'll be able to identify and resolve issues such as the ERR_BAD_REQUEST Axios error. Always ensure that your URLs are correctly constructed, especially in dynamic scenarios where variables are involved.

No more returning to error screens – get your React and Strapi application back on track. Happy coding!

Видео Solving the ERR_BAD_REQUEST Axios Error: A Guide for React and Strapi Developers канала vlogize