Скачать или смотреть Solving the net::ERR_CERT_AUTHORITY_INVALID Error in Angular11 with HTTPS API Calls

How to resolve the common `net::ERR_CERT_AUTHORITY_INVALID` error in Angular 11 when using HTTPS API calls. Learn about certificates and their importance in secure communication.
---
This video is based on the question https://stackoverflow.com/q/66985659/ asked by the user 'Stefan Srbljanin' ( https://stackoverflow.com/u/12931125/ ) and on the answer https://stackoverflow.com/a/66985905/ provided by the user 'Bertramp' ( https://stackoverflow.com/u/6787568/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: HTTPS API calls in Angular11

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Solving the net::ERR_CERT_AUTHORITY_INVALID Error in Angular11 with HTTPS API Calls

In developing web applications, secure communication through HTTPS is becoming increasingly important. If you are using Angular, you may encounter the frustrating net::ERR_CERT_AUTHORITY_INVALID error when trying to make API calls over HTTPS. This is particularly common if your backend team is using self-signed certificates or the certificates have not been properly configured. Let’s break down the problem and explore how to resolve this issue effectively.

Understanding the Problem

When you switch your API from HTTP to HTTPS, your Angular application must communicate securely with the backend server. However, if the server is using a self-signed certificate or an untrusted certificate authority, your browser will not consider this secure, resulting in the net::ERR_CERT_AUTHORITY_INVALID error. This can halt development and testing, especially if you are still learning how to manage these interactions.

Here’s a quick recap of the scenario:

Your team transitioned from using a standard HTTP link to a secure HTTPS link for API calls.

You encountered an error indicating that the certificate authority is invalid.

You wondered if a solution exists that doesn't require manually installing certificates on every local machine.

The Solution: Obtaining a Trusted Certificate

To resolve this issue efficiently, follow these steps:

1. Obtain a Trusted SSL Certificate

The most effective way to avoid the net::ERR_CERT_AUTHORITY_INVALID error is to use a trusted SSL certificate. Here’s how to go about it:

Purchase a Valid Certificate: Your backend team should purchase an SSL certificate from a recognized certificate authority (CA). Options include companies like Let’s Encrypt (free), DigiCert, and Comodo.

Install the Certificate on IIS: Once obtained, the team will need to install the certificate on the IIS server hosting the backend API. This process usually involves importing the certificate into the server's Certificate Store and assigning it to the appropriate website binding.

2. Configure Angular to Trust Certificates (if using self-signed certificates)

If for some reason the team opts to use a self-signed certificate instead of a trusted one (not recommended for production environments), here’s what to do to handle it locally:

Manually Trust the Certificate: You will need to manually trust the self-signed certificate on your local machine. This involves downloading the certificate and installing it as a trusted authority in your system.

Test Locally: After trusting the certificate, you should be able to run your Angular app and make HTTPS calls without encountering the error.

3. Ensure Proper API Call Handling

Once you have a trusted certificate in place, ensure your Angular application is set to make the HTTPS calls correctly. Check for:

Correct URL Format: Ensure that your API calls are using the HTTPS protocol in your service files.

CORS Configuration: Sometimes, issues may arise from Cross-Origin Resource Sharing (CORS) settings, especially when the frontend and backend are served from different origins.

Conclusion

Switching from HTTP to HTTPS is crucial for the security of your application, but it does introduce some complexities, particularly surrounding certificates. A valid SSL certificate from a trusted authority is the best route forward to resolve the net::ERR_CERT_AUTHORITY_INVALID error in your Angular application. Take the time to configure your server correctly, and you'll not only eliminate the error but also enhance the security of your data transmission. Happy coding!