HarmonyOS 鸿蒙Next Web访问本地嵌套的vue页面,vue页面无法请求http接口

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Web访问本地嵌套的vue页面,vue页面无法请求http接口 项目需要把vue页面内嵌到原生app客户端中,不放在服务器上。

我把vue前端H5项目放到了rawfile目录下,

然后使用Web组件加载vue项目下的index.html页面

加载方式为:

这样页面能出来,但是h5页面中请求后端服务器的接口无法响应,请求应该是没有发出去,

请教下,这种方式如何实现vue页面发送http请求到后端服务器。


更多关于HarmonyOS 鸿蒙Next Web访问本地嵌套的vue页面,vue页面无法请求http接口的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

可能是发生跨域问题,可以将dist文件夹放在resfile目录下,注意这里的resfile文件夹是需要您在resource目录下新建的,与rawfile同级即可,然后再把整个dist文件夹放置在resfile文件夹下面,参考下方demo,设置允许跨域访问的目录。 文档链接: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5#setpathallowinguniversalaccess12

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: WebviewController = new webview.WebviewController();

  build() {
    Row() {
      Web({ src: "resource://resfile/dist/index.html", controller: this.controller })
        .onControllerAttached(() => {
          try {
            // 设置允许可以跨域访问的路径列表
            this.controller.setPathAllowingUniversalAccess([
              getContext().resourceDir,
              getContext().filesDir + "/example"
            ])
            // this.controller.loadUrl("file://" + getContext().resourceDir + "/index.html")
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
          }
        })
        .javaScriptAccess(true)
        .fileAccess(true)
        .domStorageAccess(true)
    }
  }
}

更多关于HarmonyOS 鸿蒙Next Web访问本地嵌套的vue页面,vue页面无法请求http接口的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next Web环境中,当访问本地嵌套的Vue页面时,如果Vue页面无法请求HTTP接口,这通常是由于权限、网络配置或CORS(跨源资源共享)策略导致的。

  1. 检查网络权限:确保你的鸿蒙应用已经声明了必要的网络权限。在config.json中检查是否包含了访问网络的权限声明。

  2. CORS策略:如果你的HTTP接口部署在不同的源(域名、协议或端口),那么需要服务器支持CORS。检查服务器是否发送了正确的CORS头部,允许你的鸿蒙应用所在的源进行访问。

  3. 本地服务器配置:如果HTTP接口部署在本地,确保鸿蒙设备能够访问到该本地服务器。这可能需要配置本地服务器的监听地址和端口,以及鸿蒙设备的网络设置。

  4. 代理设置:如果鸿蒙设备处于特定的网络环境(如公司内网),可能需要配置代理才能访问外部HTTP接口。

  5. 调试工具:使用鸿蒙开发者工具中的网络调试功能,查看HTTP请求的详细信息和响应状态,这有助于诊断问题。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html

回到顶部