Angular + NET Core "Http failure response for (unknown url): 0 Unknown Error"

Question

I am trying to send a GET request from my angular app to my .NET Core WebAPI backend. Both are running on localhost. Angular is running on port 4200, WebAPI is running on port 5001. When I make the GET request in Angular, the following error is shown in console:

After searching online, almost every answer comes down to an issue with CORS not being enabled correctly on the backend server. However, to my knowledge, I have CORS setup correctly. Here is my configuration for CORS:

This is the service function in Angular as well as the GET method in WebAPI:

I know the URL is correct, because, when I copy the URL into Postman, it works as intended.

Mainly I'm wondering if I did mess up CORS, because that seems to be the main issue with this error message, or if there is something else I may have missed.

EDIT (Solution): Ok, so through various trials and errors, I believe I have found the issue. When I made the initial project, I made the project in JetBrains Rider. I decided to try making a new project in Visual Studio to see what would happen, however, the problem still remained. As it turns out the issue was not with CORS, but with an invalid HTTPS localhost certificate. When I tried to run the console command dotnet dev-certs https --trust I did not get a popup to confirm the certificate, but instead just a generic error message that was not useful. Here is how I fixed the issue (whether or not this is the right way can be for discussion).

1. Ran the WebAPI and opened the site in Chrome.
2. On HTTPS connections, Chrome will allow you to see the certificate info by clicking the "Secure" or "Not Secure" tag next to the URL. I clicked that and opened the certificate info window.
3. There is a tab called "Details" where I was able to save the certificate to my computer.
4. Once the certificate was saved, I could right-click it and there was a right-click option called "Install Certificate".
5. I installed the certificate just clicking next and leaving the values as default. After that the Angular app now makes GET, POST, PUT, etc requests as expected, and when I copy the Web API URLs into Chrome, Chrome now says the connection is secure rather than not secure as it was doing before.

Answer 1

Ok, so through various trials and errors, I believe I have found the issue. When I made the initial project, I made the project in JetBrains Rider. I decided to try making a new project in Visual Studio to see what would happen, however, the problem still remained. As it turns out the issue was not with CORS, but with an invalid HTTPS localhost certificate. When I tried to run the console command dotnet dev-certs https --trust I did not get a popup to confirm the certificate, but instead just a generic error message that was not useful. Here is how I fixed the issue (whether or not this is the right way can be for discussion).

1. Ran the WebAPI and opened the site in Chrome.
2. On HTTPS connections, Chrome will allow you to see the certificate info by clicking the "Secure" or "Not Secure" tag next to the URL. I clicked that and opened the certificate info window.
3. There is a tab called "Details" where I was able to save the certificate to my computer.
4. Once the certificate was saved, I could right-click it and there was a right-click option called "Install Certificate".
5. I installed the certificate just clicking next and leaving the values as default. After that the Angular app now makes GET, POST, PUT, etc requests as expected, and when I copy the Web API URLs into Chrome, Chrome now says the connection is secure rather than not secure as it was doing before.

This is the error I was getting when running dotnet dev-certs https --trust for reference: