HarmonyOS鸿蒙Next中Web组件使用rawfile的html，js加载本地沙箱文件，通过setPathAllowingUniversalAccess设置路径列表，仍出现跨域问题

HarmonyOS鸿蒙Next中Web组件使用rawfile的html，js加载本地沙箱文件，通过setPathAllowingUniversalAccess设置路径列表，仍出现跨域问题

问题

Web组件加载rawfile中的html，通过runJavaScript执行一段代码。该代码访问沙箱文件。

经setPathAllowingUniversalAccess，将沙箱路径 context.filesDir +"/vector" 加入到目录列表。

web调试，仍提示跨域问题：

from origin ‘resource://rawfile’ has been blocked by CORS policy

页面

Web({
    src: $rawfile('olmap/index.html'),
    controller: this.controller
})
  .width('100%')
  .flexShrink(1)
  .flexGrow(1)
  .onInterceptRequest((event) => {
    if (!event) {
      return null;
    }

    const url = decodeURI(event.request.getRequestUrl());
    console.log("======",url)
    return null;
  // 
  })
  .onControllerAttached(() => {
    // 设置允许file访问的列表
    const folders = [
     getContext().filesDir + "/vector"
    ];
    console.log('====', JSON.stringify(folders))
    this.controller.setPathAllowingUniversalAccess(folders)
})

log

未见对 file:///data/storage/el2/base/haps/entry/files/vector/%E6%83%A0%E5%B1%B1%E4%B8%80%E6%9C%B5%E8%8A%B13.kml 的访问

==== ["/data/storage/el2/base/haps/entry/files/vector"]

====== resource://rawfile/olmap/index.html

====== resource://rawfile/olmap/datamap.css

====== resource://rawfile/olmap/datamap.js

web console

Access to XMLHttpRequest at ‘file:///data/storage/el2/base/haps/entry/files/vector/%E6%83%A0%E5%B1%B1%E4%B8%80%E6%9C%B5%E8%8A%B13.kml’ from origin ‘resource://rawfile’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, arkweb-extension, https, chrome-untrusted, arkweb, data, chrome-extension, chrome.


更多关于HarmonyOS鸿蒙Next中Web组件使用rawfile的html，js加载本地沙箱文件，通过setPathAllowingUniversalAccess设置路径列表，仍出现跨域问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，Web组件使用rawfile加载本地HTML和JS文件时，即使通过setPathAllowingUniversalAccess设置了路径列表，仍可能因浏览器安全策略导致跨域问题。跨域问题通常是由于浏览器限制不同源之间的资源访问。鸿蒙的Web组件基于系统浏览器内核，遵循相同的安全策略。建议检查文件路径和访问权限，确保所有资源在同一源下加载。

更多关于HarmonyOS鸿蒙Next中Web组件使用rawfile的html，js加载本地沙箱文件，通过setPathAllowingUniversalAccess设置路径列表，仍出现跨域问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中处理Web组件的跨域访问问题需要注意以下几点：

  1. setPathAllowingUniversalAccess 仅允许Web组件访问指定路径的文件，但不会改变CORS策略。rawfile 协议 (resource://rawfile) 和 file 协议之间的访问仍受CORS限制。

  2. 解决方案建议：

    • 将需要访问的本地文件也放入 rawfile 目录，统一使用 resource://rawfile 协议访问
    • 或者通过 onInterceptRequest 拦截请求，将 file:// 路径的请求重定向到应用可访问的路径

  3. 当前代码中 onInterceptRequest 回调没有处理文件请求，可以修改为：

    .onInterceptRequest((event) => {
    if (!event) return null;
    
    const url = decodeURI(event.request.getRequestUrl());
    if(url.startsWith('file:///data/storage')) {
        // 将file协议请求转换为应用可访问的路径
        const newUrl = url.replace('file://', 'internal://');
        return new WebResourceResponse(newUrl);
    }
    return null;
})

  4. 另一种方案是使用ArkWeb提供的本地服务器能力，通过 http 协议访问本地文件，避免跨域问题。

注意检查文件路径是否正确，确保有访问权限。跨域问题是浏览器安全策略，需要从协议统一或请求拦截的角度解决。

回到顶部