I'm making an app in MERN stack, and I have successfully deployed it on the hosting. I'm using cPanel. I have one error with the default configuration of the htaccess. With the default I get my data from api successfully, but on the refresh of the page I get 404 error. I suppose that happens because react does not use static pages but everything is like a component, and php default config does not return to the index.html on the refresh.
Now, when I enter the usual react config, my 404 error on refresh does not happen, BUT my api data is blocked, it cant be fetched on the component. The solution that I have seen on the internet is to use rewrite rule for all api calls. That did not work.
When I have the default react configuration in the htaccess I get this error on the console: Error fetching artworks: SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON
But my api call in the network is 200 OK.
The default configuration that renders the data but has 404 error on the refresh is this:
# Existing PHP Handler (Keep this for PHP support)
<IfModule mime_module>
AddHandler application/x-httpd-ea-php81 .php .php8 .phtml
</IfModule>
Here is the routing rules that when I input in the htaccess I get no 404 error, but my api calls are blocked or whatever is happening.
# React Routing Rules
RewriteEngine On
RewriteCond %{REQUEST_URI} !^/api/.*
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]
and here is the defitition of the exception that supposedly should allow the api calls to be handled properly
# Proxy to Node.js backend (for /api requests)
RewriteRule ^api/(.*)$ http://localhost:3001/$1 [P,L]
Now my question is, what should I configure my htaccess so that I can refresh the page without 404 error, and with no api call blocking.
