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 stackoverflow.com/questions/9499794/… — Rob King
– Rob King, Commented May 1, 2014 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
– zero7, Commented May 1, 2014 at 23:40

Sebastian · Accepted Answer · 2014-05-01 20:54:01Z

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 1, 2014 at 20:54

Sebastian

17.6k5 gold badges51 silver badges57 bronze badges

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

2 Comments

Rob King Over a year ago

The port is just what IIS Express chose, everything is on the same port.

Sebastian Over a year ago

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?

Maurice · Accepted Answer · 2014-05-02 13:13:35Z

0

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});

answered May 2, 2014 at 13:13

Maurice

27.7k5 gold badges52 silver badges62 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related