Enable CORS: Angular & .Net Core API with Free Hosting Angular

Enable CORS in Angular and ASP.Net Core API 

In this blog post, we will explore how to enable Cross-Origin Resource Sharing (CORS) between an Angular application and an ASP.NET Core API. We will provide a detailed, step-by-step guide on how to configure CORS in both the Angular and ASP.NET Core API sides.

CORS is a security feature that restricts web applications from making requests to servers that are outside of their domain. By enabling CORS, you can allow your Angular application to make requests to an ASP.NET Core API that is hosted on a different domain.

To enable CORS in our Angular application, we will use the HttpClient module to send HTTP requests with appropriate headers. In our ASP.NET Core API, we will configure the CORS middleware to accept requests from the Angular application domain.

By the end of this blog post, you will have a clear understanding of how to enable CORS in Angular and ASP.NET Core API. You will also have the knowledge to configure CORS for your own web applications.

Create file proxy.config.json in “src” folder 

Add following configuration in this file: 

{ 

    "/api/*": { 

        "target": "http://localhost:3000", 

        "secure": false, 

        "logLevel": "debug" 

    } 

} 

 

Now Open angular.json file and add this file under serve>options 

 

 

  

Open ASP.Net Core Application and add middle ware for configure the Cross-Origin-Services 

 

Now add following code to enable the services 

Use code in comment that will work without an error and use * in WithOrigins instead of the urls. 

 

 

After that you need to use the cors with or without the allow functions... 

 

Finally you can enable the cors on your api class or any method inside of your api: 

 

 

 

 

Code for upload free Angular App. 

https://firebase.google.com/docs/hosting/quickstart 

Follow steps 

 

 

Learn how to enable Cross-Origin Resource Sharing (CORS) between an Angular application and an ASP.NET Core API with this step-by-step guide. Understand how to configure CORS for your own web applications. Keywords: CORS, Angular, ASP.NET Core API, security, HttpClient, middleware, web applications, configuration.

Comments

Post a Comment

Popular posts from this blog

ng-scripts is disabled on this system

Image
ng : File C:\Users\...\AppData\Roaming\npm\ng.ps1 cannot be loaded because running scripts is disabled on this system. Angular is a widely adopted front-end web development framework that empowers developers to build complex and dynamic web applications.  However, mastering Angular can come with its own set of challenges, particularly for developers who encounter issues related to running scripts on their systems. One common error message that developers may encounter is "File  C:\Users\bsqua\AppData\Roaming\npm\ng.ps1 cannot be loaded because running scripts is disabled on this system ." This error occurs when PowerShell, which is used by Angular CLI, is unable to execute scripts due to security measures implemented by the operating system. In this blog, we aim to provide a comprehensive guide on how to resolve this issue. We will explain why scripts are disabled by default and offer guidance on how to enable them safely.  We will also provide detailed, step-by-step inst...
Read more

Resolving the "An error occurred while accessing the Microsoft.Extensions.Hosting services" in ASP.NET Core

Introduction: When working with ASP.NET Core, you may encounter an error message stating "An error occurred while accessing the Microsoft.Extensions.Hosting services." This error often occurs when there are issues with service registration or configuration. One specific error scenario that can lead to this message is related to the use of the `AddDistributedSession` method in the `IServiceCollection`. This blog post will guide you through the process of resolving this error and configuring session options using the correct method, `AddSession`. Step 1: Understanding the error message The error message "An error occurred while accessing the Microsoft.Extensions.Hosting services" indicates that there are problems with the services being constructed and resolved within the ASP.NET Core application. In this case, the error is related to the session configuration. Step 2: Identifying the issue The specific error message you encountered includes the following information:...
Read more