I am having my APIs (built using Laravel 8 Framework) hosted in a subdomain - webapi.somedomain.com. And am running a local version of Frontend UI built using React Framework and Axios library for the HTTP Requests. I have hosted in a Shared Hosting space (cPanel + CentOS) I am facing an issue while hitting the hosted APIs. I have stated the error I see below:
Access to XMLHttpRequest at 'http://webapi.somedomain.com/api/authorization/signup' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
So I added the Laravel Custom CORS middleware; updated the files and cleared the cache using php artisan config:cache
. Didn't work out.
Couldn't find any other resources. So I added the Laravel CORS package - fruitcake/laravel-cors
. Have installed it, published it and added it to the middleware; updated the file and cleared the cache. But still I see the CORS error when hitting the APIs from my React project
config/cors.php:
'paths' => ['api/*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => false,
Kernel.php:
protected $middleware = [
...
\Fruitcake\Cors\HandleCors::class,
];
Am just a beginner in Laravel. What am I doing wrong? Can someone help me out? Thanks in advance.
P.S.: I totally understand what CORS is and how it works. I m new to Laravel. Not new to development. I wanna know what else should I be doing, and whether I am leaving out something.
The issue is because of the .htaccess file.
In a shared hosting server it is important to have only the public folder of your project accessible in the public_html folder and the rest hidden in private.
Link your index.php to the autoload.php that is in private (public non-accessible place - root folder or any folder thats outside public_html)
When adding a Laravel project to a shared hosting workspace, it is important to add a few rules to the .htaccess file in the public folder which is inside the public_html folder of your hosting workspace.
Finally the .htaccess file should look something like this:
<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
Options -MultiViews
</IfModule>
Options +FollowSymlinks
RewriteEngine On
# Redirect Trailing Slashes...
RewriteRule ^(.*)/$ /$1 [L,R=301]
# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
</IfModule>
RewriteEngine On
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule .* - [e=HTTP_AUTHORIZATION:%1]
Only after this you will be able to run queries to the Laravel routes. If not only the index.php
will get executed and the other routes will not be recognized.
This might be a known one. But as I was a beginner, I couldn't figure this out. Adding this as the answer in case any other beginner is facing the same problem. Cheers.