Angular PHP Authorization Header API Call Fails - php

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 ?