I’ve been through all articles related to this and neither solution is helping me.
I have an API running on a remote server built on Laravel 9. My Kernel.php file has the $middleware array like this:
protected $middleware = [
AppHttpMiddlewareTrustProxies::class,
AppHttpMiddlewareCheckForMaintenanceMode::class,
IlluminateFoundationHttpMiddlewareValidatePostSize::class,
AppHttpMiddlewareTrimStrings::class,
IlluminateFoundationHttpMiddlewareConvertEmptyStringsToNull::class,
AppHttpMiddlewareCORS::class,
];
The CORS.php class has the following code:
public function handle($request, Closure $next)
{
$request->header('Access-Control-Allow-Origin' , '*');
$request->header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT, DELETE, PATCH');
$request->header('Access-Control-Allow-Headers', 'origin, x-requested-with');
return $next($request);
}
But everytime I try to access it from an Angular application from my localhost I get CORS error. In my angular I have an interceptor for every request which adds the headers to the requests:
request = request.clone({ headers: request.headers.set('Access-Control-Allow-Origin', '*') });
request = request.clone({headers: request.headers.set('Access-Control-Allow-Methods', 'GET, OPTIONS')});
request = request.clone({headers: request.headers.set('Access-Control-Allow-Headers', 'Origin, Content-Type, X-Auth-Token')});
request = request.clone({headers: request.headers.set('Access-Control-Allow-Credentials', 'true')});
On the Chrome inspector I can see that the headers are being passed as shown in the picture:

I tried also adding the following to my .htaccess/apache config:
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
Also I’ve tried few variants in the CORS.php handler, tried declaring it as a route middleware, etc, etc. But just won’t work.
I’m pretty sure it’s something very silly that I’m missing, could anyone help?