AngularJS web API not working with strings - angularjs

Question

At the moment what I am trying to do is to return a list of strings from my web API, but I was getting this error 'No 'Access-Control-Allow-Origin' header is present on the requested resource.'
After struggling for a while I have realised it's because it will only allow me to return a list of integers and not a list of strings.
Here are the two methods (one of which would obviously be commented out).
public IEnumerable<string> Get(int userId)
{
IEnumerable<string> listOfFormGroups = new List<string>() { "Form Group 1", "Form Group 2", "Form Group 3" };
return listOfFormGroups;
}
public IEnumerable<int> Get(int id)
{
IEnumerable<int> listOfRoles = new List<int>() { 1, 2, 3 };
return listOfRoles;
}
The top method throws the error, but the second method returns fine.
my angular service
this.get = function (userId) {
return $http.get(toApiUrl('formgroup/') + userId);
}
my angular controller calling the service,
var promiseGet = formGroupService.get(1);
promiseGet.then(function (result) {
$scope.FormGroups = result.data
},
function (errorResult) {
$log.error('Unable to get users form groups. An error has occurred. :', errorResult);
});

Answer 1

If you look at the default WebApiConfig, it looks like this:
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
I believe the integer version is working because you called the param id as stated in the config. The string one you have is trying to map to id, seeing userId as the only parameter and not mapping it correctly. I believe that is your error.
Change your method to look like this:
public IEnumerable<string> Get(int id)
{
IEnumerable<string> listOfFormGroups = new List<string>() { "Form Group 1", "Form Group 2", "Form Group 3" };
return listOfFormGroups;
}

Answer 2

peinearydevelopment's answer may be correct, but there is another interesting part of the question. The No 'Access-Control-Allow-Origin' message is a CORS error message (a cross origin request). In general, a script is limited to making AJAX requests to the same URL origin that it came from.
My guess that part of the problem is coming from the fact that toApiUrl() creates a URL that is of a different domain than the script came from.
There are ways around this, but it requires changes on the server side. See the documentation on how to do this.

Answer 3

It does't have any problem. You can call it by having below url.
I have already tested it and its working fine.
http://localhost:52257/api/temp/Get?userId=3
// please use your domain or localhost....
So in your case you can go with,
return $http.get(toApiUrl('formgroup/Get?userId=3'));