Enable CORS in Web API

Enable CORS

Because you created a new Visual Studio application to run your Web API method, it’s running in a different domain from your Angular application. For your Angular application to call this Web API you must tell the Web API that you’re allowing Cross-Origin Resource Sharing (CORS). Right-mouse click on your Web API project and select Manage NuGet Packages… Click on the Browse tab and search for cors as shown in

 Figure 1: Install this package into your project.

Figure 3: Search for Microsoft CORS

After CORS is installed into your project, open the \App_Start\WebApiConfig.cs file and add the following line of code in the Register() method:

public static void Register(HttpConfiguration config)
{
  config.EnableCors();
  ...
}

Go back to your ConfigController class and add the following using statement:

using System.Web.Http.Cors;

Add the EnableCors() attribute just above your ConfigController class. You can get specific on the origins, headers, and methods properties to restrict access to only your Angular application if you want. For the purposes of this article, just set them to accept all requests by specifying any asterisk for each, as shown in the following code snippet:

[EnableCors(origins: "*",
            headers: "*",
            methods: "*")]
public class ConfigController : ApiController
{
   ...
}