HarmonyOS 鸿蒙Next 解析js跨域错误的方法

HarmonyOS 鸿蒙Next 解析js跨域错误的方法 加载下载到沙箱并解压后的index.html文件，通过javascript动态生成html内容，javascript在加载.cfg文件报跨域错误，排查了目录是对的，请问哪位大佬知道是否有解决方法？

[CONSOLE:0] “Access to XMLHttpRequest at ‘file:///data/storage/el2/base/haps/entry/files/XXXX/dygl/XXXX/model/dygl.cfg’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, arkweb, data, chrome-extension, chrome, https, chrome-untrusted.”, source: file:///data/storage/el2/base/haps/entry/files/XXXX/index.html?featureCodes=XEVRLFSHCGAAD,CC33,DL01,PA16,SCENE01 (0)

[CONSOLE:1] “dygl loading assets error: ./dygl/XXXX/model/dygl.cfg”, source: file:///data/storage/el2/base/haps/entry/files/XXXX/js/app.70b10c8d.js (1)

[CONSOLE:0] “Access to XMLHttpRequest at ‘file:///data/storage/el2/base/haps/entry/files/XXXX/dygl/XXXX/model/external.cfg’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, arkweb, data, chrome-extension, chrome, https, chrome-untrusted.”, source: file:///data/storage/el2/base/haps/entry/files/XXXX/index.html?featureCodes=XEVRLFSHCGAAD,CC33,DL01,PA16,SCENE01 (0)

[CONSOLE:1] “dygl loading assets error: ./dygl/XXXX/model/external.cfg”, source: file:///data/storage/el2/base/haps/entry/files/XXXX/js/app.70b10c8d.js (1)


更多关于HarmonyOS 鸿蒙Next 解析js跨域错误的方法的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

为了提高安全性，ArkWeb内核不允许file协议或者resource协议访问URL上下文中的跨域请求。

目前解决web内核跨域问题有以下两种方式：

方式一：在Web组件的onInterceptRequest方法中，使用http或https等协议，替代原先使用的file或resource协议进行加载

注：当跨域协议为自定义协议时，需要使用customizeSchemes赋予自定义协议url的跨域请求与fetch请求的权限，文档可参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/js-apis-webview-V13#customizeschemes

方式二：通过setPathAllowingUniversalAccess设置一个路径列表。当使用file协议访问该列表中的资源时，允许进行跨域访问本地文件。

相关说明以及Demo实现可参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-cross-origin-V5#ZH-CN_TOPIC_0000001884916574__%E6%8B%A6%E6%88%AA%E6%9C%AC%E5%9C%B0%E8%B5%84%E6%BA%90%E8%B7%A8%E5%9F%9F

更多关于HarmonyOS 鸿蒙Next 解析js跨域错误的方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


加载沙箱资源用方法二解决了！

Web()
.fileAccess(true)

项目名称

  • 项目状态: 进行中
  • 项目类型: 移动应用
  • 项目描述: 这是一个全新的移动应用，旨在提供便捷的服务。
  • 开始日期: 2023-01-01
  • 结束日期: 2023-12-31
  • 团队成员: 张三, 李四, 王五
  • 项目目标: 开发一个高效、易用的移动应用，提升用户体验。

联系方式

在HarmonyOS鸿蒙Next中，解析JS跨域错误时，主要关注以下几个方面：

  1. 跨域请求配置：确保在manifest.json文件中正确配置了跨域请求权限。例如：

    "network": {
  "cors": {
    "allowedOrigins": ["https://example.com"]
  }
}

  2. JS代码中的请求处理：使用fetch或XMLHttpRequest发起跨域请求时，确保请求头正确设置。例如：

    fetch('https://example.com/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
}).then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

  3. 检查服务器端配置：确保服务器端允许来自鸿蒙应用的跨域请求。服务器端需要设置Access-Control-Allow-Origin等响应头。

  4. 日志与调试：在应用中使用console.log()或鸿蒙提供的日志工具输出错误信息，便于定位跨域问题。

通过这些方法可以有效解析和处理JS跨域错误。

回到顶部