Web API loads via URL but get Error 404 from Angular script

Question

I have a WebAPI method here:

http://localhost:50463/api/movies

and when accessing it from a browser it loads perfectly.

In my project (the same project as where Web API resides) when calling the method from AngularJS I get an error 500:

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

When I click the link in the error it loads the data perfectly.

The routing for WebAPI is as follows:

config.Routes.MapHttpRoute("DefaultApiGet", "Api/{controller}", 
    new {action = "Get"}, 
    new {httpMethod = new HttpMethodConstraint(HttpMethod.Get)}
);

This is the angular call

app.factory('dataFactory', function ($http) {

    var factory = {};

    factory.data = function (callback) {
        $http.get('/api/movies').success(callback);
    };

    return factory;
});

I added this javascript just to rule-out angular, I get the same:

$.ajax({
url: "/api/movies",
type: 'GET',
//data: "{ 'ID': " + id + "}",
contentType: "application/json; charset=utf-8",
success: function(data) {
    alert(data);
},
error: function (xhr, ajaxOptions, thrownError) {
    alert(thrownError);
}
});

Any idea what I have done wrong?

I got the routes from here, I dont think the case matters http://stackoverflow.com/questions/9499794/single-controller-with-multiple-get-methods-in-asp-net-web-api — Rob King, May 01 '14 at 21:10
Can you post your code for the controller action method? Internal Server tells me it might be failing on the method when you make the ajax call. Maybe missing a parameter when you are making the call? — zero7, May 01 '14 at 23:40

score 0 · Answer 1 · answered May 01 '14 at 20:54

0

I assume your Web API and AngularJS app are running on a different port. In this case you are running in a Same-Origin-Policy issue.

Ensure your Web API is responding with HTTP CORS headers e.g.:

Access-Control-Allow-Origin: http://<angular_domain>:<angular_port>

or

Access-Control-Allow-Origin: *

answered May 01 '14 at 20:54

Sebastian

16,813
4
49
56

The port is just what IIS Express chose, everything is on the same port. – Rob King May 01 '14 at 21:19
Use developer tools to see which request the browser sends (exact URL, is there any error message coming along with the 500)? Which URL are you using to access your Angular app? – Sebastian May 01 '14 at 22:15

score 0 · Answer 2 · answered May 02 '14 at 13:13

Doesn't look like a CORS issue to me as you are using a relative URL in your $.ajax() request.

Did you try $.getJSON("/api/movies").then(successHandler, faulureHandler)

Not sure of that will help but for one you are sending a contentType header with a GET request which contains no content. There should be an Accept header instead, but WebAPI should be fine without one.

I would also remove the constrains from the routing and revert back to the default route mapping to see if the problem is there.

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

Web API loads via URL but get Error 404 from Angular script

2 Answers2