如何在Angular应用中加载iframe时避免查询字符串，隐藏传递参数

方案一：通过POST表单提交加载页面（推荐） #

直接加载页面默认是GET请求，要隐藏参数最直接的方式是用POST表单提交——参数会放在请求体中，不会出现在URL里，且浏览器会自动跳转到目标ASPX页面。

在Angular组件中实现动态表单提交：

loadSamplePage(): void {
  // 创建表单元素
  const form = document.createElement('form');
  form.method = 'POST';
  form.action = 'http://www.somedomain.com/Sample/Sample.aspx';
  form.target = '_self'; // 可改为_blank在新窗口打开

  // 添加隐藏参数
  const id1Input = document.createElement('input');
  id1Input.type = 'hidden';
  id1Input.name = 'ID1';
  id1Input.value = '12';
  form.appendChild(id1Input);

  const id2Input = document.createElement('input');
  id2Input.type = 'hidden';
  id2Input.name = 'ID2';
  id2Input.value = '13';
  form.appendChild(id2Input);

  // 提交并清理表单
  document.body.appendChild(form);
  form.submit();
  document.body.removeChild(form);
}

ASPX后台直接通过Request.Form["ID1"]、Request.Form["ID2"]即可获取参数。

方案二：通过请求头传递参数（需后端配合） #

如果一定要用请求头传参，注意这种方式默认不会自动加载页面，需要手动处理响应内容：

Angular端代码 #

用HttpClient发送带请求头的POST请求：

import { HttpClient, HttpHeaders } from '@angular/common/http';

constructor(private http: HttpClient) {}

loadSamplePageWithHeaders(): void {
  const headers = new HttpHeaders({
    'ID1': '12',
    'ID2': '13',
    'Content-Type': 'application/x-www-form-urlencoded'
  });

  this.http.post('http://www.somedomain.com/Sample/Sample.aspx', {}, { headers, responseType: 'text' })
    .subscribe(response => {
      // 将响应的HTML插入到页面容器中
      document.getElementById('page-container')!.innerHTML = response;
    });
}

ASPX后端代码 #

在Sample.aspx.cs中读取请求头：

protected void Page_Load(object sender, EventArgs e)
{
  string id1 = Request.Headers["ID1"];
  string id2 = Request.Headers["ID2"];
  // 后续业务逻辑处理
}

⚠️ 注意：这种方式需要目标域名配置CORS允许你的Angular应用访问；直接插入HTML存在XSS风险，需确保响应内容安全。

额外注意 #

• 跨域场景下，表单提交通常无需额外CORS配置，但如果目标站点有CSRF防护，需添加对应令牌参数。
• 若目标ASPX页面原本依赖GET参数逻辑，需修改后台代码适配POST或请求头的参数读取方式。

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