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!