Django-Nginx-React: How to fix ERR_CERT_COMMON_NAME_INVALID and Self-Signed Certificate Issues

I am working on a project using SimpleJWT tokens stored in HttpOnly cookies for authentication. The architecture involves a Django backend, an Nginx server, and a React+Vite frontend. Below is the configuration setup:

  • I have created a self-signed Certificate Authority (CA).
  • I issued two separate certificates signed by the same CA: one for the Nginx server (serving the Django backend) and one for the React+Vite app

enter image description here

When I run my React+Vite app on Google Chrome and try to call the login API /api/auth/login/ of the Djagno backend, I receive the following error:

POST https://172.x.x.x/api/auth/login/ net::ERR_CERT_COMMON_NAME_INVALID

Additionally, I set up a Node.js project to test the same API by making Axios requests. In this case, I get the Error: self-signed certificate in certificate chain

However, if I run the Node.js project with NODE_TLS_REJECT_UNAUTHORIZED='0', the API works fine, and I can see the HttpOnly cookies and the correct response from Django.

It seems to be related to the self-signed certificates, but I’m unsure how to resolve this for Chrome to correctly accept the certificates and allow setting cookies. I’m also looking for a solution that doesn't involve disabling certificate validation with NODE_TLS_REJECT_UNAUTHORIZED=0.

Questions:

  • How can I resolve the ERR_CERT_COMMON_NAME_INVALID in Chrome?
  • How can I configure my self-signed certificates correctly to allow Chrome to accept them and set HttpOnly cookies properly?

Any help would be appreciated!

Back to Top