HarmonyOS 鸿蒙Next web组件加载的html离线包发起axios请求跨域，鸿蒙web组件能否禁用同源安全策略

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

HarmonyOS 鸿蒙Next web组件加载的html离线包发起axios请求跨域，鸿蒙web组件能否禁用同源安全策略 web 组件加载的html离线包发起axios请求跨域,鸿蒙web组件能否禁用同源安全策略

Harmonyos Next教程
2 回复

不能直接禁用安全策略。可以参考如下案例：

要成功访问这些跨域资源，需要使用http或者https等协议进行加载（需要自己构造仅供自己个人或者阻止使用的域名），并且使用Web组件的onInterceptRequest进行本地资源拦截替换。

//main/ets/pages/index.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  // 构造域名和本地文件的映射表
  schemeMap = new Map([
    ["https://www.example.com/index.html", "index.html"],
    ["https://www.example.com/js/script.js", "js/script.js"]
  ])
  // 构造本地文件和构造返回的格式mimeType
  mimeTypeMap = new Map([
    ["index.html", 'text/html'],
    ["js/script.js", "text/javascript"]
  ])

  build() {
    Row() {
      Column() {
        // 针对本地index.html,使用http或者https协议代替file协议或者resource协议，并且构造一个属于自己的域名，
        // 本例中构造www.huawei.com为例。
        Web({ src: "https://www.huawei.com/index.html", controller: this.webviewController })
          .javaScriptAccess(true)
          .fileAccess(true)
          .domStorageAccess(true)
          .geolocationAccess(true)
          .width("100%")
          .height("100%")
          .onInterceptRequest((event) => {
            if (!event) {
              return;
            }
            // 此处匹配自己想要加载的本地离线资源，进行资源拦截替换，绕过跨域
            if (this.schemeMap.has(event.request.getRequestUrl())) {
              let rawfileName: string = this.schemeMap.get(event.request.getRequestUrl())!;
              let mimeType = this.mimeTypeMap.get(rawfileName);
              if (typeof mimeType === 'string') {
                let response = new WebResourceResponse();
                // 构造响应数据，如果本地文件在rawfile下，可以通过如下方式设置
                response.setResponseData($rawfile(rawfileName));
                response.setResponseEncoding('utf-8');
                response.setResponseMimeType(mimeType);
                response.setResponseCode(200);
                response.setReasonMessage('OK');
                response.setResponseIsReady(true);
                return response;
              }
            }
            return null;
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

<html>
<head>
  <meta name=""viewport"" content=""width=device-width,initial-scale=1"">
</head>
<body>
<script crossorigin src=""./js/script.js""></script>
</body>
</html>

更多关于HarmonyOS 鸿蒙Next web组件加载的html离线包发起axios请求跨域，鸿蒙web组件能否禁用同源安全策略的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中，关于Next web组件加载的html离线包发起axios请求跨域的问题，以及是否能禁用同源安全策略（Same-Origin Policy），以下是专业回答：

HarmonyOS鸿蒙系统的Next web组件在设计上遵循了Web安全标准，其中包括同源安全策略。这一策略是为了保护用户免受跨站脚本攻击（XSS）等安全威胁。因此，默认情况下，鸿蒙web组件不支持直接禁用同源安全策略。

如果你的html离线包中的axios请求需要跨域访问资源，你需要考虑以下几种解决方案：

  1. CORS配置：确保目标服务器配置了正确的CORS（跨来源资源共享）策略，允许你的html离线包所在的域发起跨域请求。

  2. 代理服务器：如果直接跨域请求不可行，你可以考虑设置一个代理服务器，将请求转发到目标服务器，从而绕过同源策略限制。

  3. JSONP：作为一种替代方案，如果你的需求允许，可以使用JSONP进行跨域数据交换，但请注意，JSONP只支持GET请求，且存在安全风险。

如果上述方法仍然无法解决你的问题，可能是由于鸿蒙系统对Web安全策略有进一步的限制。此时，建议直接联系鸿蒙系统的开发者支持或访问官网客服获取更具体的帮助。

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

回到顶部