使用Ionic inApp Browser打开URL时如何在请求头中携带token

问题原因说明 #

Ionic InAppBrowser（以下简称IAB）基于独立原生WebView实现，和应用主WebView上下文完全隔离：

• 不会经过Angular HttpInterceptor拦截栈，因此无法自动附加你全局配置的鉴权Token
• 默认不共享主WebView、系统浏览器的Cookie/认证缓存，因此直接打开鉴权页会被重定向到登录页
• 你之前尝试的URL拼接Token参数无效，是因为服务端鉴权逻辑默认从请求头读取Authorization字段，未适配URL参数传参的规则，该方案需要后端配合改造，优先级最低。

Capacitor Browser可正常打开的核心原因是它调用系统自带浏览器组件（Android Chrome Custom Tab、iOS SFSafariViewController），会共享系统浏览器的认证Cookie缓存，并非自动帮你注入了请求头。 #

方案1：创建实例时直接注入请求头（优先推荐，双端兼容） #

cordova-plugin-inappbrowser 最新稳定版原生支持在创建实例时传入自定义请求头，不需要额外改造后端，是成本最低的实现方式。
你原有代码里定义了target = '_self'但未传入create方法，属于无效代码，且_self模式会在应用当前WebView加载页面、直接覆盖应用界面，无法正常触发insertCSS等IAB方法，建议替换为_blank模式。
参考实现代码：

// 从你本地的鉴权服务/本地存储中获取有效Token
const authToken = `Bearer ${yourStoredAuthToken}`;
const browser = this.iab.create(
  'https://example/dev/ViewForPdf',
  '_blank',
  {
    // 注入自定义请求头，Android/iOS双端生效
    headers: {
      'Authorization': authToken
    },
    // 按需配置其他参数，比如隐藏地址栏、禁用缩放等
    location: 'no',
    zoom: 'no',
    clearcache: 'no'
  }
);

browser.on('loadstop').subscribe(event => {
  browser.insertCSS({ code: 'body{color: red;' });
});

适配提示：如果使用的是5.0以下版本的cordova-plugin-inappbrowser，iOS端需要将headers配置替换为iosheaders字段、Android端替换为androidheaders字段，升级插件到最新稳定版即可统一使用headers字段配置。

方案2：预加载页面内容后本地加载（适配特殊定制场景） #

如果因为插件版本限制、特殊定制需求无法使用方案1，可以通过应用内HTTP栈预拉取页面内容，再交给IAB加载本地内容，该路径下页面初始请求会经过你配置的HttpInterceptor自动附加Token。
参考实现代码：

// 用Angular HttpClient发起请求，自动走拦截器附加Token
this.http.get('https://example/dev/ViewForPdf', { responseType: 'text' })
  .subscribe(pageHtml => {
    // 替换HTML内的相对资源路径为绝对路径，避免CSS/JS/静态资源加载404
    const processedHtml = pageHtml.replace(
      /(src|href)="\//g, 
      `$1="https://example/dev/`
    );
    // IAB加载处理后的本地HTML，无需再发起跨域鉴权请求
    const browser = this.iab.create(
      `data:text/html;charset=utf-8,${encodeURIComponent(processedHtml)}`,
      '_blank',
      { location: 'no' }
    );
    browser.on('loadstop').subscribe(event => {
      browser.insertCSS({ code: 'body{color: red;' });
    });
  });

注意：该方案仅适配页面加载完成后无额外异步鉴权请求的场景（比如服务端直出的静态PDF预览页），如果页面加载后还会发起分片拉取、数据请求等异步操作，这类请求从IAB独立WebView发出时依然不会携带Token，需要额外做请求拦截处理。

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