Angular场景下如何在iFrame中执行POST请求并展示服务端响应

实现方案 #

可以实现该需求，以下是两种常用的可行方案：

方案1：动态创建表单提交到iframe #

利用HTML原生表单的target属性，直接指定表单提交后的响应加载到目标iframe中，适合后端接口兼容application/x-www-form-urlencoded请求格式的场景。

步骤实现：

1. 模板中定义iframe，指定name属性用于表单target关联：

<iframe #authIframe name="authIframeContainer" frameborder="0" width="100%" height="100%"></iframe>

2. 组件中动态创建隐藏表单发起POST请求：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('authIframe') authIframe!: ElementRef<HTMLIFrameElement>;

  ngAfterViewInit(): void {
    this.submitAuthRequest();
  }

  private submitAuthRequest(): void {
    // 后端接口需要的用户校验参数
    const postParams = {
      userId: '当前登录用户ID',
      authToken: '当前用户鉴权凭证'
      // 其他业务校验参数
    };

    // 创建隐藏表单
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = 'http://myBackendApi/auth';
    form.target = 'authIframeContainer'; // 响应直接加载到指定iframe
    form.style.display = 'none';

    // 把参数转为表单隐藏字段
    Object.entries(postParams).forEach(([key, value]) => {
      const input = document.createElement('input');
      input.type = 'hidden';
      input.name = key;
      input.value = value as string;
      form.appendChild(input);
    });

    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
  }
}

如果后端校验通过后返回302重定向到目标应用地址，iframe会自动跟随重定向加载应用，无需额外处理

方案2：先通过HttpClient发起鉴权请求，再操作iframe加载内容 #

适合后端接口仅接收application/json格式请求体的场景。

步骤实现：

1. 模板中定义iframe：

<iframe #appIframe frameborder="0" width="100%" height="100%"></iframe>

2. 组件中先发起POST鉴权，拿到结果后加载到iframe：

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  @ViewChild('appIframe') appIframe!: ElementRef<HTMLIFrameElement>;

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.checkAuthAndLoadApp();
  }

  private checkAuthAndLoadApp(): void {
    const authParams = {
      userId: '当前登录用户ID',
      authToken: '当前用户鉴权凭证'
      // 其他业务校验参数
    };

    this.http.post('http://myBackendApi/auth', authParams, { responseType: 'text' })
      .subscribe({
        next: (res) => {
          // 情况1：后端返回应用地址，直接赋值给iframe的src
          this.appIframe.nativeElement.src = res.trim();
          // 情况2：后端直接返回应用HTML内容，直接写入iframe
          // const iframeDoc = this.appIframe.nativeElement.contentDocument;
          // iframeDoc.open();
          // iframeDoc.write(res);
          // iframeDoc.close();
        },
        error: (err) => {
          // 权限校验失败的自定义处理逻辑
          console.error('访问权限校验失败', err);
        }
      })
  }
}

注意事项：如果iframe加载的目标应用和当前Angular应用跨域，需要确认目标应用的X-Frame-Options响应头没有配置禁止iframe嵌套，否则会出现加载失败的问题。

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