CORS issue with Angular Client and ASP.NET Web API

Question

I have a client side application built with AngularJS that is consuming services from a RESTful ASP.NET Web API. So far so good. I have created both of them under the same solution on Visual Studio, the API is an ASP.NET project and the AngularJS is a website. Both projects have to work using windows authorization so I created the API with windows authorization as the default AA mechanism in the project creator wizard, and for the AngularJS I have enable windows authentication on the properties tab of the project.

In order to test the communication between the two applications I decided to build a simple service. I created a Quotation model class, built the controller for it, and then added migrations and added some quotations in the database. I then tried to send a get request from the angular application only to receive this error:

After studying this issue I realized that I had to enable CORS on the web API. So I went to NuGet Package Manager and added the Microsoft.AspNet.Cors package to the project.

I then enabled CORS on the WebApiConfig.cs like this:

namespace Web_API
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API configuration and services

            // Web API routes
            config.MapHttpAttributeRoutes();

            config.EnableCors();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

And I added the header to my controller class and method (just in case on the class wasn't enough):

namespace Web_API.Controllers
{
    [EnableCors("*", "*","*")]
    public class QuotationsController : ApiController
    {
        private Web_APIContext db = new Web_APIContext();

        // GET: api/Quotations
        [EnableCors("*", "*", "*")]
        public IQueryable<Quotation> GetQuotations()
        {
            return db.Quotations;
        }

However, I still get the same error when I make a get request from the AngularJS application. Does anyone know how to fix this issue?

The problem is not related to CORS. When the server returns a 500 error the CORS header is not included that's why you are getting the CORS error. From what i'm reading below the problem is with windows authentication so you should close this question — Jasper Risseeuw
– Jasper Risseeuw, Commented Nov 30, 2017 at 22:44

Sk. Tajbir · Accepted Answer · 2016-06-11 22:18:38Z

1

can you please try this:

[EnableCors(origins: "*", headers: "*", methods: "*")]

Also don't use EnableCors in your method. As you've used this on your controller, by default all methods will fall under this rule.

I hope this will solve your problem. Thanks.

answered Jun 11, 2016 at 22:18

Sk. Tajbir

2902 silver badges9 bronze badges

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

1 Comment

João Pinto Over a year ago

I've found the problem. I created another API without Windows Authentication and it worked. How can I make it work with windows authentication?

Collectives™ on Stack Overflow

CORS issue with Angular Client and ASP.NET Web API

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related