使用iframe时跨源域，其中src来自服务器端

Question

使用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.

下面是html代码：

<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>

这里的src链接来自服务器端，我正在通过控制器传递它

下面是控制器的代码：

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';
    }
});

我不了解如何解决此跨域问题，因为在服务器端它本身就是在使用CORS

任何帮助，将不胜感激。

Answer 1

在服务器配置中，您已设置跨站点起源限制。 之所以收到此错误，是因为您在localhost：9000上正在从localhost：4000请求iframe资源。 更改它以从localhost：9000请求资源或禁用跨源限制。

Answer 2

您的两个域都不同，即http://localhost:9000和http://localhost:4000 。 由于同源策略，每个浏览器都会阻止试图访问具有不同来源的框架的任何脚本。 有关此的更多信息， 请一次参考此StackOverflow答案

但是 ，作为快速解决方案，您可以为浏览器禁用相同的来源策略。

1. 要在Chrome中禁用它， 请参考此Stackoverflow答案。
2. 要在Firefox中禁用它， 请参考此Stackoverflow答案。

仅供参考：此修补程序仅在您的本地浏览器上有效。