Angular 5跨域IFrame高度获取失败求助（CORS拦截）

这个问题的核心是浏览器同源策略的安全限制：当IFrame加载不同域名的内容时，你无法直接通过contentDocument或contentWindow访问它的DOM元素或属性，这就是你看到的"Blocked a frame with origin... from accessing a cross-origin frame"错误。

为什么你用iframe-resizer没解决？ #

大概率是因为你只在主应用（Angular端）配置了库，却忽略了IFrame目标页面也需要对应配置——这个库是通过postMessage实现跨域通信的，需要两端配合才能生效。下面是正确的实现步骤：

方案1：能控制目标域名内容时（推荐） #

如果你能修改http://docstation-st1.dvllb.travp.net/DocStation这个页面的代码，按照以下步骤配置：

第一步：在Angular项目中安装并初始化iframe-resizer #

1. 安装依赖：

   npm install iframe-resizer --save
   

2. 在你的HomeComponent中引入并初始化：

   import { Component, AfterViewInit } from '@angular/core';
   import * as iframeResize from 'iframe-resizer';
   
   @Component({
     selector: 'app-home',
     templateUrl: './home.component.html'
   })
   export class HomeComponent implements AfterViewInit {
     ngAfterViewInit(): void {
       // 初始化IFrame尺寸监听
       iframeResize.default({
         log: false, // 调试时可设为true查看日志
         checkOrigin: ['http://docstation-st1.dvllb.travp.net'], // 仅允许指定源的通信，保障安全
         heightCalculationMethod: 'bodyOffset' // 根据目标页面body高度计算，可选其他方法
       }, document.getElementById('appIframe'));
     }
   }
   

3. 简化你的HTML模板，不需要手动绑定load事件：

   <iframe 
     id="appIframe" 
     src="http://docstation-st1.dvllb.travp.net/DocStation" 
     scrolling="no" 
     frameborder="0"
   ></iframe>
   

第二步：在IFrame目标页面添加脚本 #

在DocStation的页面HTML中，引入iframe-resizer的content脚本：

<!-- 可以用CDN，或者本地拷贝该脚本文件 -->
<script src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.3.2/js/iframeResizer.contentWindow.min.js"></script>

添加完成后，主页面和IFrame会自动通过postMessage通信，实现高度的自动适配，完全规避CORS限制。

方案2：无法控制目标域名内容时（备选） #

如果无法修改目标页面代码，只能通过一些折衷方案尝试：

• 后端代理转发：在你的Angular后端搭建一个代理，将IFrame的目标URL转发为同域名请求，绕过同源策略。例如在Angular的proxy.conf.json中配置：

  {
    "/docstation/*": {
      "target": "http://docstation-st1.dvllb.travp.net",
      "secure": false,
      "changeOrigin": true,
      "pathRewrite": {
        "^/docstation": ""
      }
    }
  }
  

  然后将IFrame的src改为/docstation/DocStation，这样就变成同域名请求，此时你原来的resizeIframe方法就能正常访问contentDocument了。但注意这种方法需要后端支持，且要考虑代理的性能和安全问题。

总结 #

最可靠的方案还是方案1，通过iframe-resizer的跨域通信机制实现高度自适应。你之前没成功应该是漏掉了目标页面的脚本配置，补上之后就能正常工作了。

内容的提问来源于stack exchange，提问作者Ajay