Question

我们打算访问另一个应用程序网址，该网址位于同一台计算机上，但位于不同的端口上。所以我的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>

Chrome / Firefox DOMException错误：阻止了包含原点的框架＆＃34; http://localhost:9100＆＃34;从访问跨源框架。 at http://localhost:9100/custom/getCustomPage Where Host：localhost：9100 Referer：http://localhost:8081/app/

我在响应过滤器中添加了以下标题：

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清理程序将URL作为可信URL返回以绕过安全性。您可以这样做：

在你的HTML中

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

...并在您的打字稿中：

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

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

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

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

Angular2中IFrame的跨域问题

1 个答案: