8

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:

Console error

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:

enter image description here

enter image description here

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

enter image description here

enter image description here

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.
Improve this question
8
  • 1
    try using chrome cors extension. If the get request works when the extension is enabled, that means the problem is definitely with CORS configuration in your backend. Commented Jun 20, 2018 at 15:40
  • I've had issues with IE and Chrome where it wont let you make the call if the security certificate is bad. Try just jamming the rest call into the url bar of the browser and make sure you don't have to accept a cert for the host. Commented Jun 20, 2018 at 15:49
  • @yer So I installed the Chrome extension and enabled it, however, the error is still there. Commented Jun 20, 2018 at 17:24
  • use http :// localhost:5001 instead of https, do you have https configured on local backend server ? Commented Jun 20, 2018 at 17:31
  • yes, as @nitin mentioned use http instead of https Commented Jun 20, 2018 at 18:27

3 Answers 3

Reset to default
4

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:

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I'm getting this error on production and UAT, any idea how to solve this.
0

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();
}
Improve this answer

Comments

0

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!

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.