HarmonyOS web加载本地h5页面的网络请求跨域问题

web加载本地h5的index.html页面时，axios网络请求跨域问题，如何解决？

HarmonyOS

fox280

2024-12-25 15:58:55

浏览

回答 1

待解决

回答 1

按赞同

按时间

superinsect

webview的使用过程中存在跨域的问题，目前解决跨域问题的解决方案，主要是通过拦截并自定义请求头的形式，可参考如下代码；其中的webdata 就是你返回的页面数据。

// 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: 'www.huawei.com', 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
        })
    }
  }
}

oninterceptrequest拦截并自定义请求头，官网参考示例：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#oninterceptrequest9