javascript - Angular2 中 IFrame 的跨域问题

Question

我们打算访问托管在同一台机器上但在不同端口上的另一个应用程序 url。所以我的 Angular 2 应用程序 http://localhost:8081/app/ 试图打开一个托管在同一服务器但端口不同的站点，即 localhost:9100

We are trying to access following url in an iframe
url = http://localhost:9100/custom/getCustomPage

<iframe id="customFrame" *ngIf="url !== null" frameborder="0" [src]="url"></iframe>

Error on Chrome/Firefox DOMException: Blocked a frame with origin "http://localhost:9100" from accessing a cross-origin frame. at http://localhost:9100/custom/getCustomPage Where Host:localhost:9100 Referer:http://localhost:8081/app/

我已将以下 header 添加到响应过滤器:

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:X-Requested-With, Content-Type
Access-Control-Allow-Methods:GET, POST, DELETE, PUT
Access-Control-Allow-Origin:*
Access-Control-Expose-Headers: content-length, Allow

请帮我确定一个解决方法，以便 iFrame 允许显示结果。

这目前在 IE 11 中运行良好。

Answer 1

您必须使用 Dom sanitizer 将您的 URL 作为受信任的 url 返回以绕过安全性。以下是您可以执行的操作:

在您的 html 中:

<iframe [src]='getSourceURL()'></iframe>

... 在您的 typescript 中:

import { DomSanitizer } from '@angular/platform-browser';

@Component({
    ....
})
export class YourComponent {      

    yourIFrameUrl: string;
    constructor(public sanitizer: DomSanitizer) { }

    getSourceURL() {
        return this.sanitizer.bypassSecurityTrustUrl(this.yourIFrameUrl);
    }
}