I have an issue of cross origin domain and getting an error as below when working with 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 html code:
<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>
Here the src link comes from server side from where i am passing it through controller
below is the code of controller:
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';
}
});
i dont understand how to resolve this cross domain issue because at the server side it self i am using CORS
Any help would be appreciated.
In your server configuration, you have cross site origin restriction set up. You are getting this error because you are requesting iframe resource from localhost:4000 while you are on localhost:9000. Change it to request resource from localhost:9000 or disable cross origin restriction.
Both of your domains are different, ie, http://localhost:9000
and http://localhost:4000
. Because of the same-origin policy every browser blocks any script trying to access a frame with a different origin. For more info on this, Please refer to this StackOverflow answer once
However , as a quick fix, you can disable same origin policy for your browser.
FYI: This fix will only work on your local browser.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.