axios bypass TLS certificates error. No solution at all for FRONT END (React) - reactjs

Question

[EDIT] : one answer below
trying to call my node https backend from react using axios (of fetch)...
Always facing certificate errors for self signed ones. Can "by pass" the REJECT_UNAUTORIZED error by setting NODE_TLS_REJECT_UNAUTHORIZED=0 when starting the react app, but this is clearly not the solution. I'm also facing different messages such as ERR_CERT_COMMON_NAME_INVALID.
Worth to mention that everything is running fine when using postman, when activating the certificate verification and uploading my self signed CA PEM certificate in postman.
I tried to do the same in chrome (uploading the self signed CA PEM certificate in the root CA Store) but without luck. Still the warning...
Of course I tried the solution to add an https agent (see code below), but this is also not fixing the issue.
That solution seems to be fine for NODE apps, but not from Front End apps in React or any other language,..
So what is the solution ? How we can request a local self signed https backend server from react without these warnings ?
There are millions of issues like this reported here or in axios github, but still no viable solution ?
Thks
axios.defaults.httpsAgent = new https.Agent({
rejectUnauthorized: false,
port: 443,
});
const tokensData = await axios.post<TLoginApi, AxiosResponse<TLoginApi, any>, TLoginDTO>(
`${process.env.AUTH_URL}/login`,
credentials,
{
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
// or this but failed anyway httpsAgent: new https.Agent({
rejectUnauthorized: false,
port: 443,
}),
}
);

Answer 1

answering my own question.
To avoid using NODE_TLS_REJECT_UNAUTHORIZED=0, you need to create your self sign certificate.
The main issues I was facing was related to LOCALHOST and GOOGLE CHROME (at least release 108) , because my test backend is in same dev machine.
I came up with a solution to generate self signed certificate that is OK for Google Chrome with domain like 'localhost'.
When generating the server certificate, you need to add an extension file that is adding some DNS and the IP address (IP4 & IP6) of 'localhost'.
Also important to import your root CA in Chrome to avoid Reject unauthorized...
steps to create CA and certificates
1- generate your root CA. It has to be imported in Google Chrome
openssl req -x509 -newkey rsa:4096 -days 999 -keyout ca-key.pem -out ca-cert.pem -subj "/C=US/ST=Oregon/L=City/O=whatevev/OU=whatevev/CN=your name if you want/emailAddress=test#test.com"
2- generate the server private key and CSR
openssl req -newkey rsa:4096 -keyout server-key.pem -out server-req.pem -subj "/C=US/ST=Oregon/L=City/O=whatevev/OU=whatevev/CN=your name if you want/emailAddress=test#test.com"
3- finaly generate the server key, with some additional conf (see below)
openssl x509 -req -days 999 -in server-req.pem -CA ca-cert.pem -CAkey ca-key.pem -CAcreateserial -out server-cert.pem -extfile server-ext.conf
example of server-ext.conf file that prevent chrome from complaining about wrong DNS or anything else
can fine more information about this extension file HERE
subjectAltName=DNS:test.home,DNS:localhost.home,DNS:localhost,IP:0.0.0.0,IP:127.0.0.1,IP:::1
Finally, on your BACKEND, you can configure your nodejs express server using your root CA and the certificate/key :
const httpsOptions: https.ServerOptions = {
key: fs.readFileSync(
path.join(__dirname, "auth", "certificats", "server-key.pem")
),
cert: fs.readFileSync(
path.join(__dirname, "auth", "certificats", "server-cert.pem")
),
ca: fs.readFileSync(
path.join(__dirname, "auth", "certificats", "ca-cert.pem")
),
passphrase: "passpahrase of root CA,
};