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

It is likely that your Angular app is sending requests to the wrong port.

Consult your environment.ts and or environment.prod.ts files within your angular project (if this is where you've defined your backend URLs).

Make sure the URL and port match those of the .NET app.

Alternatively, you can change the URL from your backend/.NET core app to match those found in your angular project.

Happy coding!

Answer 2

I encountered the same problem but it was not related to the certificate.

Simply, just omit HTTPS redirection from the configure method on startup.cs did the trick for me.

app.UseHttpsRedirection();

Then, you should set your Angular application to send the requests to the HTTP protocol instead. The default should be: http://localhost:5000.

Alternatively, you can wrap the HTTPS redirection in isProduction check in order to not forget to bring it back for the deployment.

if(env.IsProduction()) {
  app.UseHttpsRedirection();
}

Answer 3

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: