401 Unauthorized ajax call from angular node application calling Web Api 2 application

Question

I have been able to make calls just fine to Web Api from an Angular / Node application when I use the $sce for an IFrame , but now I want to call Web Api from jquery ajax within the application.

When I try to call it I get

401 Unauthorized

function getComments() {
    $.ajax({

        url: 'http://localhost:17308/Home/GetNewsComments?id=' + group, 
        type: 'Get',
        data: { id: tipId },
        success: function (data) {
            $("#commentDetail").empty().append(data);
        },
        error: function () {
            //alert("something seems wrong");
            console.log("something is wrong");
        }
    });
};

FYI / BTW

I HAVE been able to make calls for IFrame with

$scope.setTipId = function (id) {
   $scope.detailFrame = $sce.trustAsResourceUrl("http://localhost:17308/Home/GetNewsComments?id=" + id);

Can I do something similar for my jquery ajax calls from my controller?

Update

I even tried the "angular way"

$http.get('http://localhost:17308/CommentCount/').success(function (data) {
        console.log('made it');
    })
    .error(function () {
        console.log('error');
    });

I still get the 401 error...

Answer 1

A call to a Web Api controller and loading an iFrame are fundamentally different things.

I suspect your controller method is actually requiring some sort of authorization. Decorate the Web Api Controller or Controller method with the attribute [AllowAnonymous] as seen below. If this is not an option, your problem is you do not have a valid ASP.NET session or are not adding the token in your http calls for authorization.

[AllowAnonymous] //This allows all methods in the Controller to be accessed anonymously.  Both are redundant in this case.
public class CommentCountController : ApiController
{
   [HttpGet]
   [AllowAnonymous] //This allows this method to be accessed anonymously . Both are redundant in this case.
   public int Get()
   {
      return 1;
   }
}

Answer 2

Well, this one is a bit painful, but this WILL work. Note: you must now make ALL GET calls with jsonp , no more regular json dataType...

Read and follow instructions from HERE:

http://www.codeproject.com/Tips/631685/JSONP-in-ASP-NET-Web-API-Quick-Get-Started

Next, do all the painful Nuget install, uninstall and updates, I recall it being a bit painful with conflicts between the json formatmatter, web api, cors and newtonsoft json.

Persistence WILL pay off

Jquery call

 $.ajax({
        url: 'http://localhost:17308/Home/GetNewsComments?id=' + group, 
        type: 'Get',
        data: { id: tipId },
        contentType: 'application/json; charset=utf-8',
        dataType: "jsonp",
        callback: 'callbackFunc',  
        success: function (data) {
            var json = $.parseJSON(data);
            console.log(json);
        },
        error: function (xhr, status, error) {
            console.log(xhr + '\n' + status + '\n' + error);
        }
    });

function callbackFunc(resultData) {
    console.log(resultData);
}

I assume you paid attention and have Web Api , json formatter, CORS, along with other System.Web.Http updated and other dependencies.

So part of this is client side , but ultimately a lot HAS to do with server side with you using JSONP in web api