Why isn't my angular controller hitting my Web Api Controller?

Question

I am trying to get a List of test customers from the server. I know that the Web API controller is receiving the data from the DB because I have unit/integration tests around it; however, when I try and pull the data to my angular controller I receive a 500 status code.

Angular Controller:

var surchargeIndex = angular.module('surchargeIndex', []);

surchargeIndex.controller('SurchargeIndexController', function ($scope, customerService) {
    $scope.customers = { Key: "", Value: "" };
    customerService.getTest($scope);
});

surchargeIndex.service('customerService', [
    '$http', function($http) {
        this.getTest = function ($scope) {
            return $http({
                method: "GET",
                url: "api/Customer/GetTest",
            })
            .success(function (data) {
                $scope.customers = data;
            })
            .error(function () {
                $scope.error = "Failed to load customers!";
            });
        }
    }
]);

Web Api:

[RoutePrefix("api/Customer")]
public class CustomerController : ApiController
{
    private readonly ICustomerService _service;

    public CustomerController(ICustomerService service)
    {
        _service = service;
    }

    [Route("GetTest"), HttpGet]
    public IEnumerable<IJsonResult> GetTest()
    {
        return _service.GetTest();
    }
}

What am I missing?

Could you set a breakpoint in your C# code and see if there is an exception being thrown? I know you mentioned that you have automated tests around this code, but it could be good to just verify something is not going wrong. — Josh Darnell
– Josh Darnell, Commented Dec 3, 2014 at 14:12

Mihai Dinculescu · Accepted Answer · 2014-12-03 13:56:50Z

2

Web API doesn't allow remote connections by default.

This is called Cross-origin resource sharing (CORS).

Web API 2.2 makes it easy to enable CORS by providing the EnableCorsAttribute.

Basic Usage

[EnableCors("*", "*", "*")]
public class ResourcesController : ApiController
{
    ...

Attribute definition

[AttributeUsageAttribute(AttributeTargets.Class|AttributeTargets.Method, AllowMultiple = false)]
public EnableCorsAttribute(
    string origins,
    string headers,
    string methods
)

To enable CORS globally use

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        var cors = new EnableCorsAttribute("www.example.com", "*", "*");
        config.EnableCors(cors);
        // ...
    }
}

You will also need to install the CORS package from nuget

Install-Package Microsoft.AspNet.WebApi.Cors

answered Dec 3, 2014 at 13:56

Mihai Dinculescu

20.1k8 gold badges59 silver badges70 bronze badges

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

8 Comments

Robert Over a year ago

So I will need to do this for each of the WebApi controllers?

Mihai Dinculescu Over a year ago

No, you can register it as a global attribute if you wish. I have edited my answer to include a such example.

Robert Over a year ago

do I have to put the actual localhost (eventually production site) in the first parameter or can that be something random for now?

Josh Darnell Over a year ago

Why would CORS apply here? From the code the OP shared, it's client code (JavaScript) making a request to a Web API controller. I don't see anything that indicates there are cross-domain requests happening.

Mihai Dinculescu Over a year ago

@jadarnel27: are you serious? JS code runs on client, Web API on server, go figure.

|

Collectives™ on Stack Overflow

Why isn't my angular controller hitting my Web Api Controller?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related