Data Fetch Fails in Production Environment for React App Hosted on Subdomain

I have a WordPress website hosted on Hostinger, and I’ve created a subdomain to test my React website deployment.

In my local development environment using VS Code, the data fetch works perfectly with the following URL:

const API_URL = ‘http://localhost:8000/blogs/’;

However, when I deploy the React app to the subdomain on Hostinger, the data fetch fails, even though the rest of the website (e.g., navbar) loads correctly. As a result, features such as adding or deleting blogs also fail.

Here’s a summary of the problem:

Local Development: Data fetch works with http://localhost:8000/blogs/
Production (Hostinger Subdomain): Data fetch fails
Additionally, the data is placed in a JSON file (db.json) inside a data folder.

I suspect it might be related to the API URL configuration or CORS issues, but I am not entirely sure.

I am new to React and have almost no experience with backend development, so I apologize if this question sounds foolish or too basic.

Can someone help me understand why the data fetch fails in the production environment and how to fix it?

Additional Info:

The React app is hosted on a subdomain.
The rest of the React app loads without issues.
The API server is running and accessible in the production environment.
Thank you in advance!