HarmonyOS 如何为web页面中的ajax请求添加header信息？

Question

HarmonyOS 如何为web页面中的ajax请求添加header信息？

Answer 1

当前内部方案是需要拦截请求，并主动添加header。

参考API https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5\#onloadintercept10

参考示例代码：

import web_webview from '@ohos.web.webview'

@Entry
@Component
export struct WebAjaxPage {
  @State loadUrl: string = "http://httpbin.org/get"
  isFirstPageLoaded: boolean = false
  loadTimes: number = 0;
  private webViewController: WebviewController = new web_webview.WebviewController();

  onBackPress() {
    if (this.canBackHistory()) {
      this.webViewController.backward();
      return true
    } else {
      return false
    }
  }

  canBackHistory(): boolean {
    try {
      return this.webViewController !== undefined && this.webViewController.accessBackward()
    } catch (error) {
      return false
    }
  }

  loadUrlWithHeader() {
    let headers = new Array<web_webview.WebHeader>()
    // 这些header可以在第二个页面显示出来
    headers.push({ headerKey: 'AUTHORIZATION', headerValue: 'Custom Header Info' })
    this.webViewController.loadUrl(this.loadUrl, headers)
  }

  build() {
    Column() {
      Button("点击当前网页任意一个跳转链接（模拟二次跳转）")
      Web({ src: "https://www.huawei.com", controller: this.webViewController })
        .onLoadIntercept(event => {
          // TODO 可以在这里读取指定的url添加header再加载。这里模拟点击当前网页任意一个跳转链接，均使用header跳转到指定页面。在第二个页面可以看到添加的指定的header内容
          if (this.isFirstPageLoaded) {
            this.isFirstPageLoaded = false;
            this.loadUrlWithHeader()
            return true;
          }
          return false
        })
        .onPageEnd(() => {
          if (this.loadTimes == 0) {
            this.isFirstPageLoaded = true;
          }
        })
        .width('100%').height("100%")
    }
    .width('100%')
    .height('100%')
  }
}