HarmonyOS 鸿蒙Next Web访问本地嵌套的vue页面,vue页面无法请求http接口
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
可能是发生跨域问题,可以将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(跨源资源共享)策略导致的。
-
检查网络权限:确保你的鸿蒙应用已经声明了必要的网络权限。在
config.json
中检查是否包含了访问网络的权限声明。 -
CORS策略:如果你的HTTP接口部署在不同的源(域名、协议或端口),那么需要服务器支持CORS。检查服务器是否发送了正确的CORS头部,允许你的鸿蒙应用所在的源进行访问。
-
本地服务器配置:如果HTTP接口部署在本地,确保鸿蒙设备能够访问到该本地服务器。这可能需要配置本地服务器的监听地址和端口,以及鸿蒙设备的网络设置。
-
代理设置:如果鸿蒙设备处于特定的网络环境(如公司内网),可能需要配置代理才能访问外部HTTP接口。
-
调试工具:使用鸿蒙开发者工具中的网络调试功能,查看HTTP请求的详细信息和响应状态,这有助于诊断问题。
如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html,