How to send an HTTPS request from an Angular front-end to a server secured with a self signed certificate?

Question

I can't see what's wrong with my request from the front-end Angular application.

I previously sent the https://thalasoft.com:8443/api/ request from the same browser and confirmed I okayed the self signed certificate.

But when trying it from the front-end application at https://stephaneeybert.github.io/stephaneeybert/ng-zero/login which sends the request https://thalasoft.com:8443/api/auth/login the browser debug console shows a Status Code: 504 Gateway Timeout (from ServiceWorker)

I must add that the exact same login of this Angular front-end application and API server works fine when both are served from my localhost dev computer. The issue only occurs when the Angular front-end is served from GitPages and the API server from my remote server.

Answer 1

The problem you're facing has no final solution but I would like to explain to you the problem you facing here.

You would like to make an HTTP call from a verified SSL site to an unverified SSL site. That means the following: HTTP calls are only permitted on same-origin servers which means from verified(trusted) SSL site to verified(trusted) SSL site or non SSL to non SSL.

In your case, the self-signed certificate is a (non trusted) certificate which doesn't allow a connection from the valid one because it isn't in the trusted store on the server.

So there two solutions:

1. Add the self-signed certificate to the trusted store on the server where the angular app runs. (But in your case u cant do this because u got no access to the gitpages trusted store.

2. Use a valid certificate. For example from LetsEncrypt.

There is atm no other solutions for this case. I tried to find a workaround but there is no solution because of the "same-origin" policy which I already described above.