asp.net mvc - angularjs access denied when calling remote webapi using $resource -
i not sure if have cors issue angular app calling webapi. asp.net mvc/angular app1 , web api hosted on same iis server. example, url app1 https://example.com/app1. web api url http://example.com/wcf_webapi/clinicaluserprofile/api/{usernetworkname}. on mvc view page there <div ng-include=" 'path angular view template' "></div> uses $resource data webapi. in visual studio 2013 ide when hit f5 debug on development workstation works expected. can see call web api in ie developer tools' network tab. however, when publish app1 iis server, web api call doesn't seem made. instead, saw access denied in ie developer tools console. have mvc/angular app2 on same iis in different folder identical angular code. url app2 https://example.com/app2. doesn't access denied. can help? thanks.
here config.js
/// <reference path="c:\users\myname\source\repos\apps\app1\scripts/angular.js" /> (function() { 'use strict' var modulename = 'configmodule'; angular.module(modulename, []); var apikeyvaluepair = { 'api': { centraladmin: 'http://example.com/wcf_webapi/centraladmin/api/', fsr: 'http://example.com/fsrmanagement/api/', userprofile: 'http://example.com/wcf_webapi/clinicaluserprofile/api/' } } var userkeyvaluepair = { 'useraccount': { //this bootstraped , updated in mvc view page <script> block username: '' } } //populate constant collection angular.foreach(apikeyvaluepair, function(val, key) { angular.module(modulename).constant(key, val); }); //populate value collection angular.foreach(userkeyvaluepair, function(val, key) { angular.module(modulename).value(key, val); }); })();here app.js
/// <reference path="c:\users\myname\source\repos\apps\app1\scripts/angular.js" /> (function() { 'use strict' var modulename = 'ufsrappmodule'; var requiredmodules = [ 'configmodule', 'fsrfactorymodule', 'userfsrfactorymodule', 'userprofilefactorymodule' ] var app = angular.module(modulename, requiredmodules); // app.config( // ) })();here userprofilefactory.js
/// <reference path="c:\users\myname\source\repos\apps\app1\scripts/angular.js" /> /// <reference path="c:\users\myname\source\repos\apps\app1\scripts/angular-resource.js" /> /// <reference path="../config.js" /> (function() { 'use strict'; var modulename = 'userprofilefactorymodule'; var factoryname = 'userprofilefactory'; var requiredmodules = ["ngresource", "configmodule"]; var dependencyinjection = ['$resource', 'api', 'useraccount', internalfunc]; angular.module(modulename, requiredmodules) .factory(factoryname, dependencyinjection); function internalfunc($resource, api, useraccount) { function getuserprofile() { return $resource(api.userprofile + 'user/profile/:nn', { nn: '@nn' }); }; return { //usage: userprofilefactory.getuserprofile() getuserprofile /*public method*/ : getuserprofile /*internal method above*/ } } })();here angular template being included in mvc view
<div ng-controller="ufsrcontroller ufsrctrl"> <div class="container"> <div class="row"> <div class="widget-body"> <div class="col-md-6 col-sm-6 fa fa-border"> <div class="row"> <div class="col-md-2 col-sm-2"><label class=" form-label">facility:</label></div> <div class="col-md-9 col-sm-9" style="padding: 0; margin: 0"> <select ng-model="ufsrctrl.facility" name="facility" ng-options="fac.facilityid fac.facilityname fac in ufsrctrl.facilities" ng-disabled="(ufsrctrl.facilities === undefined || ufsrctrl.facilities.length <= 0)" ng-change="ufsrctrl.facilitychanged()" class="form-control"></select> </div> <!-- <div class="col-md-1 col-sm-1"> <i ng-show="ufsrctrl.facilities === undefined || ufsrctrl.facilities.length <= 0" class="fa fa-refresh fa-spin"></i> </div> --> </div> <div class="row"> <input type="text" name="service" ng-model="ufsrctrl.service.servicename" style="display:none" /> <div class="col-md-2 col-sm-2"><label class="form-label">service:</label></div> <div class="col-md-9 col-sm-9" style="padding: 0; margin: 0"> <select ng-model="ufsrctrl.service" name="serviceid" ng-options="ser.servicename ser in ufsrctrl.services track ser.serviceid " ng-disabled="(ufsrctrl.services === undefined || ufsrctrl.services.length <= 0)" ng-change="ufsrctrl.servicechanged()" class="form-control"> <option value="">-- choose service --</option> </select> </div> <div class="col-md-1 col-sm-1"> <i ng-show="ufsrctrl.services === undefined || ufsrctrl.services.length <= 0" class="fa fa-refresh fa-spin"></i> </div> </div> <div class="row"> <input type="text" name="role" ng-model="ufsrctrl.role.rolename" style="display:none" /> <div class="col-md-2 col-sm-2"><label class="form-label">role:</label></div> <div class="col-md-9 col-sm-9" style="padding: 0; margin: 0"> <select ng-model="ufsrctrl.role" name="roleid" ng-options="role.rolename role in ufsrctrl.roles track role.facilityserviceroleid" ng-disabled="(ufsrctrl.roles === undefined || ufsrctrl.roles.length <= 0)" ng-change="ufsrctrl.rolechanged()" class="form-control"> <option value="">-- choose role --</option> </select> </div> <div class="col-md-1 col-sm-1" title="select service dismiss me"> <i ng-show="ufsrctrl.roles === undefined || ufsrctrl.roles.length <= 0" class="fa fa-refresh fa-spin"></i> </div> </div> <!--<div class="form-group"> <button class="btn btn-primary" ng-disabled="(ufsrctrl.role === undefined)" ng-click="ufsrctrl.add()" disabled="disabled"> add new role {{ufsrctrl.role.facilityserviceroleid}} ({{ufsrctrl.role.rolename}}) </button> <span ng-show="(ufsrctrl.poststatus === true)" class="alert-success"><i class="fa fa-check"></i>success</span> <span ng-show="(ufsrctrl.poststatus === false)" class="alert-danger"><i class="fa fa-warning"></i>failure</span> </div>--> </div> <div class="col-md-6 col-sm-6"> <ul style="list-style-type:disc"> <li>select service role dropdown lists. rotating icons disappear when selected data retrieved database.</li> <li>check accuracy of name , email address , correct them address if incorrect</li> <li>click <b>send</b> button send email administrators</li> </ul> </div> </div> </div> </div> </div>here controller.js "access denied" occurred on line
userprofilefactory.getuserprofile().get({ nn: useraccount.networkname }
/// <reference path="c:\users\myname\source\repos\apps\app1\scripts/angular.js" /> /// <reference path="userprofile/userprofilefactory.js" /> ( function() { 'use strict'; var modulename = 'ufsrappmodule'; var controllername = 'ufsrcontroller'; var dependencyinjection = ['api', 'useraccount', 'userprofilefactory', 'fsrfactory', 'userfsrfactory', internalfunc]; angular.module(modulename) .controller(controllername, dependencyinjection); function internalfunc(api, useraccount, userprofilefactory, fsrfactory, userfsrfactory) { var vm = this; //controller in ng-controller, not use $scope vm.poststatus = undefined; vm.deletestatus = undefined; vm.showfsrspinner = true; //the following rest call webapi access denied userprofilefactory.getuserprofile().get({ nn: useraccount.networkname }, function(data) { //debugger; vm.userprofile = data; if (vm.userprofile != undefined || vm.userprofile != null) { if (vm.userprofile.simpleuser != undefined) vm.userid = vm.userprofile.simpleuser.userid; if (vm.userprofile.userfsrs != null && vm.userprofile.userfsrs !== undefined) { if (vm.userprofile.userfsrs.length > 1) { vm.role === undefined; vm.deletable = true; } } //due userprofilefactory uses async make rest api call //the vm.userprofile.inferredfacility won't avaialbe until success callback executed //and until vm.facilities make api call fsrfactory.facility().get() vm.facility; //for binding facility dropdown selected item (ng-model) //the fsrfacility.facility().get() returns object //but vm.facilities bound ng-option in <select> element expects array //so returned object needs wrapped in aryfacility array var aryfacility = []; var tempfacilityobj = fsrfactory.facility().get({ id: vm.userprofile.inferredfacility.facilityid }); //get facility of user's inferred facility aryfacility.push(tempfacilityobj); console.log(aryfacility); vm.facilities = aryfacility; console.log(vm.facilities); vm.facility = vm.userprofile.inferredfacility.facilityid; console.log(vm.facility); vm.poststatus = undefined; vm.services = undefined; vm.roles = undefined; vm.services = fsrfactory.service().query({ facilityid: vm.facility }); } } ); vm.facilitychanged = function() { vm.poststatus = undefined; vm.services = undefined; vm.roles = undefined; vm.services = fsrfactory.service().query({ facilityid: vm.facility }); } vm.service; //for binding service dropdown selected item (ng-model) vm.servicechanged = function() { console.log(vm.service); vm.poststatus = undefined; vm.roles = undefined; vm.roles = fsrfactory.role().query({ facilityid: vm.facility, serviceid: vm.service.serviceid }); } vm.role; //for binding role dropdown selected item (ng-model) vm.rolechanged = function() { console.log(vm.role); vm.poststatus = undefined; } vm.add = function() { //debugger; vm.poststatus = undefined; vm.deletestatus = undefined; userfsrfactory.adduserfsr().save({ userid: vm.userid, fsrid: vm.role.facilityserviceroleid }, function() { alert("new role added"); vm.poststatus = true; //vm.userprofile.userfsrs.push({ // userfacilityserviceroleid: vm.userid, // dtofsr: { // facilityname: vm.facility.facilityname, // servicename: vm.service.servicename, // rolename: vm.role.rolename, // } //}) userprofilefactory.getuserprofile().get(function(data) { vm.userprofile = data; //after add requery userprofile list of user fsr if (vm.userprofile.userfsrs != undefined && vm.userprofile.userfsrs.length > 1) { vm.deletable = true; vm.disabled = false; vm.role = undefined; } }); }, function() { alert("add role failed"); vm.poststatus = false; }); } vm.delete = function(idx, ufsrid) { vm.poststatus = undefined; vm.deletestatus = undefined; userfsrdeletefactory.deleteuserfsr().delete({ userid: vm.userid, ufsrid: ufsrid }, function() { alert("delete succeeded"); vm.deletestatus = true; vm.userprofile.userfsrs.splice(idx, 1); //remove fsr array if (vm.userprofile.userfsrs != undefined && vm.userprofile.userfsrs.length > 1) vm.deletable = true; //$route.reload(); //location.reload(true); //jquery }, function() { alert("delete failed") vm.deletestatus = false; } ); } } })();
in app1 run command in package manager console
install-package microsoft.aspnet.webapi.cors add config.enablecors(); in webapiconfig.cs before line --> config.routes.maphttproute
add attribute in controller [enablecors(origins: "*", headers: "*", methods: "*")] . doing allow accept requests domain http verbs.
also suggest make wrapper httprequest in app2 , inject in controller's factory service.
Comments
Post a Comment