Angular跳转外部域名时如何设置请求头（未用HttpClientModule与Interceptor）

普通<a>标签的GET跳转无法自定义请求头，这是浏览器的安全限制。以下是不依赖Angular HttpClient模块和拦截器的可行方案，均基于原生JavaScript实现：

方案一：用隐藏表单提交（模拟请求头，POST方式） #

如果后端支持从表单字段读取头信息，可以通过创建隐藏表单，将需要的“请求头”放在隐藏字段中提交：

// Angular组件内的方法
submitWithSimulatedHeaders() {
  // 创建表单元素
  const form = document.createElement('form');
  form.method = 'POST';
  form.action = 'https://目标域名/目标路径';
  form.target = '_blank'; // 新窗口打开，改为_self则在当前窗口跳转

  // 添加自定义头对应的隐藏字段（后端需从表单参数中读取这些值）
  const customHeader1 = document.createElement('input');
  customHeader1.type = 'hidden';
  customHeader1.name = 'X-Custom-Header-1';
  customHeader1.value = 'your-header-value-1';
  form.appendChild(customHeader1);

  const customHeader2 = document.createElement('input');
  customHeader2.type = 'hidden';
  customHeader2.name = 'X-Custom-Header-2';
  customHeader2.value = 'your-header-value-2';
  form.appendChild(customHeader2);

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

模板绑定点击事件：

<button (click)="submitWithSimulatedHeaders()">跳转到目标域名</button>

注意：此方案是用表单参数模拟请求头，需后端配合处理，并非真正在HTTP请求头中添加字段。

方案二：Fetch/XMLHttpRequest请求+内容渲染 #

若目标域名后端配置了正确的CORS策略（允许你的域名跨域，且Access-Control-Allow-Headers包含自定义头），可以先发送带请求头的请求获取页面内容，再在当前页面或新窗口渲染：

Fetch API实现： #

async navigateWithHeaders() {
  try {
    const response = await fetch('https://目标域名/目标路径', {
      method: 'GET',
      headers: {
        'X-Custom-Header': 'your-custom-value',
        // 可添加更多自定义头
      },
      credentials: 'include' // 若需携带Cookie
    });

    if (response.ok) {
      const pageContent = await response.text();
      // 方式1：在当前页面渲染内容
      document.body.innerHTML = pageContent;
      // 方式2：打开新窗口渲染
      const newWindow = window.open('', '_blank');
      newWindow.document.write(pageContent);
      newWindow.document.close();
    }
  } catch (err) {
    console.error('请求失败:', err);
  }
}

模板绑定：

<button (click)="navigateWithHeaders()">跳转到目标域名</button>

注意：此方式并非真正的跳转（地址栏不会显示目标域名），若需要地址栏同步更新，该方案不适用。

方案三：iframe加载带请求头的页面 #

创建隐藏iframe，通过XMLHttpRequest发送带请求头的请求后，将响应内容注入iframe：

loadPageInIframe() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://目标域名/目标路径', true);
  // 设置自定义请求头
  xhr.setRequestHeader('X-Custom-Header', 'your-custom-value');

  xhr.onload = () => {
    if (xhr.status === 200) {
      const iframe = document.createElement('iframe');
      iframe.style.width = '100%';
      iframe.style.height = '100vh';
      document.body.appendChild(iframe);
      // 写入响应内容到iframe
      iframe.contentDocument.write(xhr.responseText);
      iframe.contentDocument.close();
    }
  };

  xhr.onerror = () => console.error('请求失败');
  xhr.send();
}

注意：同样需要后端配置CORS，且地址栏不会显示目标域名。

核心说明 #

• 浏览器安全限制导致普通<a>标签跳转无法添加自定义请求头，所有可行方案均需后端配合。
• 若需严格意义上的“跳转（地址栏变更）+ 自定义请求头”，目前没有纯前端方案，只能依赖后端支持表单参数模拟，或通过OAuth等认证方式传递身份信息。

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