current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 3 down vote favorite

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?

share|improve this question
2  
In your MapHttpRoute shouldn't Api/ be all lowercase? –  Asok May 1 at 20:50
    
I got the routes from here, I dont think the case matters stackoverflow.com/questions/9499794/… –  Rob King May 1 at 21:10
1  
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 1 at 23:40

2 Answers 2

up vote 0 down vote

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: *
share|improve this answer
    
The port is just what IIS Express chose, everything is on the same port. –  Rob King May 1 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 1 at 22:15
up vote 0 down vote

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});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.