鸿蒙开发者社区

WOT技术大会

公众号矩阵

移动端

短视频免费课程课程排行直播课软考学堂

全部课程软考华为认证厂商认证 IT技术 PMP项目管理免费题库

文章资源问答课堂专栏直播

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO软考

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

51CTO软考题库

鸿蒙开发者社区

登录/注册
51CTO

中国优质的IT技术网站

51CTO博客

专业IT技术创作平台

51CTO学堂

IT职业在线教育平台

活动短视频专栏极客Show 鸿蒙技术特刊

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

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

HarmonyOS

2024-12-25 15:58:55

浏览

赞

收藏 0

回答 1

回答 1

按赞同

/

按时间

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
        })
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.

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

回复

2024-12-25 17:33:25

如何写精华回答，获更多曝光？

发布

相关问题

HarmonyOS Web组件加载本地H5页面，页面中接口请求被跨域规则限制，如何解除跨域限制

341浏览 • 1回复待解决

HarmonyOS Web组件加载本地H5文件跨域

704浏览 • 1回复待解决

HarmonyOS Web组件加载H5页面获取网络状态失败

400浏览 • 1回复待解决

HarmonyOS web离线加载请求跨域问题

991浏览 • 1回复待解决

HarmonyOS Web组件加载在线H5页面

699浏览 • 1回复待解决

HarmonyOS web组件加载本地页面时如何避免页面内请求发送的网络请求因跨域而请求失败

225浏览 • 1回复待解决

HarmonyOS web组件怎么获取当前h5页面的title

277浏览 • 1回复待解决

HarmonyOS web组件接入前端vite打包的本地h5项目时遇到跨域问题

358浏览 • 1回复待解决

HarmonyOS 使用web组件加载h5页面，报错17100001

583浏览 • 1回复待解决

HarmonyOS 本地H5加载

640浏览 • 1回复待解决

HarmonyOS Web本地资源跨域加载异常

252浏览 • 1回复待解决

HarmonyOS webView加载本地H5资源页，cookie无法添加的问题

566浏览 • 1回复待解决

HarmonyOS H5页面加载缓存机制

921浏览 • 1回复待解决

HarmonyOS web组件加载的h5页面中判断机型

459浏览 • 1回复待解决

HarmonyOS Web组件跨域请求问题

793浏览 • 1回复待解决

HarmonyOS h5页面缩放问题

1538浏览 • 1回复待解决

HarmonyOS Web组件本地资源跨域问题

325浏览 • 1回复待解决

HarmonyOS H5页面保存图片到本地相册

529浏览 • 1回复待解决

Web组件和h5页面如何交互？

756浏览 • 1回复待解决

如何设置Web组件加载的H5页面禁用手势缩放

3005浏览 • 1回复待解决

HarmonyOS 应用自带H5或集成SDK拉起H5页面的资料及注意事项

555浏览 • 1回复待解决

HarmonyOS web组件加载h5，h5拉起摄像头

1220浏览 • 1回复待解决

HarmonyOS Web组件加载本地资源目录resource/rawfile下的html文件，页面内https请求报跨域问题

692浏览 • 1回复待解决

HarmonyOS 使用webview组件时，怎么清空H5页面的localstorage数据，混合开发的场景，切换账号后，H5页面的数据没更新

308浏览 • 1回复待解决

HarmonyOS Web加载本地沙箱资源H5文件报错

570浏览 • 1回复待解决

提问

该提问已有2人参与，帮助了12人

相关讨论帖

HarmonyOS - JavaUI 框架之使用WebView加载本地H5页面 1回复

基于Web组件的H5页面切换类点击操作响应时延问题分析思路&案例 0回复

基于Web组件的H5页面切换类点击操作响应时延问题分析思路&案例 0回复

webview加载Vue h5失败 0回复

H5页面调起第三方App 0回复

Copyright © 2005-2025 51CTO.COM 京ICP证060544版权所有未经许可请勿转载