鸿蒙开发者社区

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包内置到HarmonyOS应用，但是未看到任何可以设置跨域请求的API，请问HarmonyOS web组件有该功能么，应该如何开启？

HarmonyOS

2024-11-07 11:14:27

986浏览

赞

收藏 0

回答 1

回答 1

按赞同

/

按时间

目前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 
        }) 
    } 
  } 
}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.

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

回复

2024-11-07 17:14:55

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

发布

相关问题

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

1411浏览 • 1回复待解决

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

588浏览 • 1回复待解决

HarmonyOS web资源跨域问题

825浏览 • 1回复待解决

HarmonyOS Web组件跨域场景，网络请求无法设置Cookie

1003浏览 • 1回复待解决

HarmonyOS web组件关闭跨域拦截

650浏览 • 1回复待解决

HarmonyOS webview组件跨域问题

891浏览 • 1回复待解决

Web组件如何访问跨域资源？

956浏览 • 1回复待解决

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

785浏览 • 1回复待解决

HarmonyOS Web组件无法跨域加载图片资源

658浏览 • 1回复待解决

HarmonyOS Web跨域问题 Access-Control-Allow-Origin

684浏览 • 1回复待解决

#鸿蒙通关秘籍#如何解决Web组件本地资源跨域问题？

1017浏览 • 1回复待解决

跨域请求问题（HarmonyOS的跨域判断机制相对于业界是否有特别处理）

2407浏览 • 1回复待解决

HarmonyOS webview跨域问题

1651浏览 • 1回复待解决

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

695浏览 • 1回复待解决

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

543浏览 • 1回复待解决

HarmonyOS web组件加载本地离线包的cookie跨域

946浏览 • 1回复待解决

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

1106浏览 • 1回复待解决

HarmonyOS web加载file://协议的图片文件，提示跨域问题

1461浏览 • 1回复待解决

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

561浏览 • 1回复待解决

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

1081浏览 • 1回复待解决

HarmonyOS Web跨域，C++ 层如何给请求Header增加Access-Control-Allow-Origin -

700浏览 • 1回复待解决

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

705浏览 • 1回复待解决

#鸿蒙通关秘籍#如何使用鸿蒙Web组件本地资源跨域拦截器？

750浏览 • 1回复待解决

iframe标签 src内部访问top跨域问题

1043浏览 • 1回复待解决

HarmonyOS web组件通过file://协议加载本地文件，本地文件JS中发起http请求报错，提示跨域了，这种如何解决？

722浏览 • 1回复待解决

提问

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

相关讨论帖

#HarmonyOS NEXT 体验官#了解 webview 请求拦截防止 cors 跨域 0回复

ArkWeb网络安全基础 - 跨域请求与解决方案 0回复

JS笔记之跨域 1回复

后端工程师的「跨域」之旅（一） 0回复

后端工程师的「跨域」之旅（二） 0回复

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