AngularJS $http Remote Web Api call $sce whitelist ignored

[Jennifer Walters]

I asked this on stackoverstated, errrr I mean stackoverflow but there hasn't been an answer.

I am calling a REMOTE web api service in AngularJS.

Since this is a REMOTE web api call, I am using jsonp and added the address to the $sce whiltelist. (see code below)

The call works in Postman.
In AngularJS the web api call crashes before sending the call so it is NOT even hitting the web api server.

Error:
//[$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. URL: ...

I have created the $sce whitelist to the remote web api server (localhost for now) but the whitelist seems to be ignored because the error message says that.

I have put the code in Plunker for easy reading. scripts.js file contains the relevant code.
scripts_What_I_tried.js are things I have tried, tried, tried, etc.

http://plnkr.co/edit/gKvnOjT4rs6po6dlFt1O?p=preview

var myApp;
(function () {
    myApp = angular.module('myApp', ['ngTouch', '$sce']);
})();

myApp.config(['$sceDelegateProvider', function ($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        'self',
        'http://localhost:2857/**',  
        'localhost:2857/**'
    ]);
}]);

myApp.service("APIService", ['$http', '$log', '$sce', function ($http, $log, $sce)
    {

    this.RetrvDataMainGrid = function ()
    {
    var urlToSend = 'http://localhost:2857/api/' + 'SearchMasterGetList/' + p_PlunkRandomString;
    $http({
        method: 'JSONP',
        url: $sce.trustAsUrl(urlToSend) 
    }).then(function successCallback(response) {
        return response;
    }, function errorCallback(response) {
        console.log(response);
        return null;
    });

    }

}]); // end myApp.service("APIService", function ($http)

[Sander Elias]

Hi Jennifer,

You don't need the $sce stuff in your $http request.  Do something like:

myApp.service("APIService", ['$http', '$log', '$sce', function ($http, $log, $sce)
    {

    this.RetrvDataMainGrid = function ()
    {
    var urlToSend = 'http://localhost:2857/api/' + 'SearchMasterGetList/' + p_PlunkRandomString;
    $http({
        method: 'JSONP',

        url: urlToSend
    }).then(function successCallback(response) {

        return response;
    }, function errorCallback(response) {
        console.log(response);
        return null;
    });

    }

$sce.thust* is only needed if you need to put anything in your view!

Regards

Sander