Encountering a cross-origin domain issue, receiving the following error while working with an iframe:
candidateInterviewCtrl.js:39 Uncaught SecurityError: Blocked a frame with origin "http://localhost:9000" from accessing a frame with origin "http://localhost:4000". Protocols, domains, and ports must match.
Below is the HTML code snippet:
<div ng-class="{'col-xs-6': myVar=='something'}">
<div class="panel panel-default panel-height" ng-repeat="candidateInfo in aCandidateDetails track by $index">
<div class="panel-heading header-background">
<div stop-watch time="xyz" name="candidateInfo.name" time-of-interview="candidateInfo.doi" class="stop-watch"></div>
<div class="row">
<div class="col-xs-2"><a style="cursor:pointer" class="pull-right">{{candidateInfo.name}}</a></div>
<div class="col-xs-offset-9"><a style="cursor:pointer" ng-click="fnVar(candidateInfo.name, candidateInfo.filepath)" data-toggle="collapse" data-target="{{'#'+toggle}}">{{candidateInfo.name}} resume</a></div>
</div>
</div>
</div></div>
<div id="{{toggle}}" class="collapse" ng-class="{'col-xs-6': myVar=='something'}" ng-if="checkVar">
<iframe width="100%" height="600px" ng-src="{{getIframeSrc()}}" onload="resizeIframe(this)"></iframe></div>
The src link is provided from the server side through the controller.
Here is the controller code snippet:
angular.module('hrPortalApp')
.controller('candidateInterviewCtrl', function($scope, $state, $sce, getCandidateInterviewListService) {
getCandidateInterviewListService.fnGetCandidateDetails("xyzzy").then(function(response) {
$scope.aCandidateDetails = response;
console.log(response);
$scope.toggle = "accor"
});
$scope.fnVar = function(name, filepath) {
$scope.file = filepath;
$scope.checkVar = !$scope.checkVar;
if ($scope.checkVar) {
$scope.myVar = "something";
} else {
$scope.myVar = false;
}
};
$scope.fnInterviewView = function(name) {
$state.go('main.Topics', {
"candidateDetails": $scope.aCandidateDetails,
"name": name
})
};
$scope.getIframeSrc = function() {
return 'http://localhost:4000/' + $scope.file;
};
window.resizeIframe=function(obj){
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
});
Seeking assistance on resolving this cross-domain issue despite implementing CORS on the server side.
Any suggestions or help would be greatly appreciated.