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

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

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

  1. 前端h5项目，使用vite + react开发，使用的hash路由，访问形式如:xxx./index.html/#/detail, 打包好后放入rawfile目录。

  2. 使用web组件去展示这个h5项目，遇到跨域问题，根据社区搜索到的解决方案（地址:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-cross-origin-V5），在onInterceptRequest里面做了文件地址的替换，能展示h5页面。

现在的问题是:

  1. 我想指定访问的h5页面应该怎么做？访问h5项目首页，是src: “index.html”，现在想访问detail路由，地址应该是:src: ‘index.html/#/detail’，但是因为加了#号，就不能显示了。

  2. 不想在onInterceptRequest去处理#号，因为项目涉及到的微应用比较多，稍有不慎，会影响到一些特殊场景。


更多关于HarmonyOS 鸿蒙Next web组件接入前端vite打包的本地h5项目时遇到跨域问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
3 回复

代码中拦截器对dataPath进行处理下，就能成功跳转到detail。

处理的代码类似下面示例：

if(dataPath == "xxx./index.html/#/detail"){
    dataPath = "xxx/index.html"
}

response.setResponseData($rawfile(dataPath));

web组件的src跳转的url还为xxx./index.html/#/detail，但是setResponseData中逻辑还是去rawfile文件下找index.html文件，再由index.html内部路由跳转detail页面。

web组件的src跳转的url还为xxx./index.html/#/detail具体的页面，但是setResponseData中是index.html页面

setResponseData方法的参数描述：要设置的资源响应数据。string表示HTML格式的字符串。number表示文件句柄, 此句柄由系统的Web组件负责关闭。 Resource表示应用rawfile目录下文件资源。 ArrayBuffer表示资源的原始二进制数据。

rawfile目录下并没有/index.html/#/detail文件

先按照上述方法尝试下。

更多关于HarmonyOS 鸿蒙Next web组件接入前端vite打包的本地h5项目时遇到跨域问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


正在问题分析中

在HarmonyOS鸿蒙Next web组件接入前端vite打包的本地H5项目时遇到跨域问题，通常是由于浏览器安全策略导致的。鸿蒙系统作为客户端环境，在加载本地或远程H5内容时，可能会受到CORS（跨源资源共享）策略的限制。

解决此问题的方法通常涉及以下几个方面：

  1. 配置CORS头：确保你的服务器正确配置了CORS相关的HTTP头，允许来自鸿蒙客户端的请求。这通常需要在服务器端设置Access-Control-Allow-Origin等头信息。

  2. 使用代理：在vite配置中设置代理，将鸿蒙客户端的请求转发到你的开发服务器，从而绕过跨域限制。你可以在vite.config.js文件中配置代理规则。

  3. 修改鸿蒙客户端配置：检查鸿蒙客户端的配置，看是否有相关设置可以放宽对跨域请求的限制，尽管这种可能性较小，因为大多数跨域问题需要在服务器端或开发框架中解决。

  4. 本地开发环境特殊处理：如果是在本地开发环境中遇到此问题，可以考虑使用如webpack-dev-server等工具提供的本地代理功能，或者修改浏览器的安全设置（不推荐，因为这可能引入安全风险）。

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

回到顶部