Javascript 如何在angular中嵌入外部URL？_Javascript_Angular

Javascript 如何在angular中嵌入外部URL？

javascript angular

Javascript 如何在angular中嵌入外部URL？,javascript,angular,Javascript,Angular,我正在尝试使用iframe在angular应用程序中嵌入一个外部url。这就是我得到的错误是这样的：下面是我试图嵌入外部url的模板 <iframe height="500" width="100%" [src]="url | safe" frameborder="0"></iframe> // url = `https://fonts.google.com/`; // th

我正在尝试使用iframe在angular应用程序中嵌入一个外部url。这就是我得到的

错误是这样的：

下面是我试图嵌入外部url的模板

<iframe height="500" width="100%" [src]="url | safe" frameborder="0"></iframe>

//   url = `https://fonts.google.com/`;

// this is a dummy url. this url will be replaced by a page on my another website (owned by myself but different domain)

但是我仍然得到以下错误&外部网页没有被嵌入

Refused to display 'https://fonts.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

注意我使用的是angular的最新版本

上面的方法是我在网上找到的。我找不到别的东西了。是否有人建议将外部URL作为

iframe

嵌入的最佳方法此错误意味着您尝试嵌入的站点不允许具有不同域名的站点嵌入它。没有办法绕过，你可以在

如果指定SameOrgin，仍然可以在框架中使用该页面作为只要包含在框架中的站点与服务页面

您可以尝试以下方法来避免CORS问题：

HTML:

TS:

src:string；//这意味着我可以嵌入我自己的域名。。是吗？是的，如果您的域将返回x-frame-options的SAMEORIGIN值，您可以阅读有关内容安全策略的更多信息-您还可以限制特定类型的内容（如脚本、样式等）@mex您可以使用JSONP来避免此类错误。看看我的答案
Refused to display 'https://fonts.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

src: string; // <- YOUR URL
@ViewChild('iframe') iframe: ElementRef;

 ngAfterViewInit() {
   const doc = this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentElement.contentWindow;
   const content = `
       <html>
       <head>
         <base target="_parent">
       </head>
       <body>
       <script type="text/javascript" src="${this.src}"></script>
       </body>
     </html>
   `;

   doc.open();
   doc.write(content);
   doc.close();
 }