Angular PHP Authorization Header API Call Fails

Question

I am working on a login page functionality in a SPA built with Angular CLI. My backend is tomcat, php with mysql on a hosting server to which I am able to successfully connect, get and update via post call all the other content in the app using httpclient module. I run CLI with proxy. App is running at localhost:4200

Without Authorization Header, API calls succeeds and I get the proper response:

{"status":true,"resp":"Login Success."} 

from my login.php file.

Login Service:

const headers = new HttpHeaders({
  'Content-Type': 'application/x-www-form-urlencoded',
  'Authorization': 'Basic ' + btoa(email+':'+pwd)    <---Including this line gives me error
});

When I add this line 'Authorization': 'Basic ' + btoa(email+':'+pwd), the API calls itself fails. It doesn't even show is it OPTIONS/POST in console. It gives (failed) net::ERR_EMPTY_RESPONSE on some line in zone.js. Not sure if this angular issue.

Req Headers I see in console:

Provisional headers are shown
Accept: application/json, text/plain, */*
Authorization: Basic YXNkZjphc2Rm
Content-Type: application/x-www-form-urlencoded
Referer: http://localhost:4200/home
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36

Below is the screenshot link. enter image description here

/public-html/project/api/login.php:

header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Max-Age: 3600");
header ("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token, Access-Control-Allow-Headers, Authorization, X-Requested-With");

    $json = file_get_contents('php://input');
    $data = json_decode($json,true);

I've also tried most of the .htaccess solutions. Nothing worked.

.htaccess(in /public_html):

RewriteEngine On
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule .* - [e=HTTP_AUTHORIZATION:%1]

//Tried this too
RewriteEngine On
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

Header add Access-Control-Allow-Credentials true
    Header add Access-Control-Allow-Methods "GET, POST, PUT, HEAD, OPTIONS, DELETE, PATCH"
    Header add Access-Control-Allow-Headers *
    Header always set Access-Control-Expose-Headers "*"
    Header add Access-Control-Allow-Origin *
    Header set Connection keep-alive
    Header set Access-Control-Max-Age "3600"
    Header set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token"

The same request works in postman when I use Basic Auth, I am able to print the authorization header in php script as well. But it doesnt work in browser, any ideas why ? Struck since 2 days. Can't get this to work. I dont want to expose username/password in POST formData, but want to send it in Authorization header. How can I get this to work ? Should I add .htaccess somewhere in subfolders ?