HarmonyOS Web组件跨域请求问题

把离线H5包内置到HarmonyOS应用，但是未看到任何可以设置跨域请求的API，请问HarmonyOS web组件有该功能么，应该如何开启？

HarmonyOS

zbw_apple

2024-11-07 11:14:27

浏览

回答 1

待解决

回答 1

按赞同

按时间

zxjiu

目前HarmonyOS解决跨域问题的解决方案，主要是通过拦截并自定义请求头的形式，可参考如下代码：

// xxx.ets 
import web_webview from '@ohos.web.webview' 
 
@Entry 
@Component 
struct WebComponent { 
  controller: web_webview.WebviewController = new web_webview.WebviewController() 
  responseweb: WebResourceResponse = new WebResourceResponse() 
  heads:Header[] = new Array() 
  @State webdata: string = "<!DOCTYPE html>\n" + 
    "<html>\n"+ 
    "<head>\n"+ 
    "<title>intercept test</title>\n"+ 
    "</head>\n"+ 
    "<body>\n"+ 
    "<h1>intercept test</h1>\n"+ 
    "</body>\n"+ 
    "</html>" 
  build() { 
    Column() { 
      Web({ src:'网络地址', controller: this.controller }) 
        .onInterceptRequest((event) => { 
          if (event) { 
            console.log('url:' + event.request.getRequestUrl()) 
          } 
          let head1:Header = { 
            headerKey:"Access-Control-Allow-Origin", 
            headerValue:"*" 
          } 
          let head2:Header = { 
            headerKey:"Cache-Control", 
            headerValue:"no-cache" 
          } 
          let length = this.heads.push(head1) 
          length = this.heads.push(head2) 
          this.responseweb.setResponseHeader(this.heads) 
          this.responseweb.setResponseData(this.webdata) 
          this.responseweb.setResponseEncoding('utf-8') 
          this.responseweb.setResponseMimeType('text/html') 
          this.responseweb.setResponseCode(200) 
          this.responseweb.setReasonMessage('OK') 
          return this.responseweb 
        }) 
    } 
  } 
}

其中的webdata 就是你返回的页面数据。如果觉得用string的形式返回webdata的形式维护麻烦，可以在拦截的过程中使用http请求，把请求的返回数据复制给webdata 同样能达到效果。