Web组件加载本地网页,网页中的http请求报跨域错误(HarmonyOS 鸿蒙Next)

Web组件加载本地网页,网页中的http请求报跨域错误(HarmonyOS 鸿蒙Next)

cke_291.png

onInterceptRequest: (event) => {
    let url = event.request.getRequestUrl()
    XALog.info('PJFWebView OnInterceptRequestEvent: ' + JSON.stringify(url))

    // 处理预检请求 (OPTIONS)
    if (event.request.getRequestMethod() === 'OPTIONS') {
      XALog.info('PJFWebView OnInterceptRequestEvent: Handling OPTIONS preflight');
      const response = new WebResourceResponse();
      response.setResponseCode(204); // 必须使用 204 No Content
      const requestHeader = event.request.getRequestHeader();
      response.setResponseHeader(requestHeader.concat([
        { headerKey: "Access-Control-Allow-Origin", headerValue: "*" },
        { headerKey: "Content-Type", headerValue: this.getMimeType(url) },
        { headerKey: "Access-Control-Allow-Methods", headerValue: "GET, POST, PUT, DELETE, OPTIONS" },
        { headerKey: "Access-Control-Allow-Headers", headerValue: "content-type,x-requested-with,ecpweb-sessionid,x-forwarded-for,X-Encrypted-By" },
        { headerKey: "Access-Control-Expose-Headers", headerValue: "*" },
        { headerKey: "Vary", headerValue: "Origin" }
      ]))
      return response;
    }

    if (url.startsWith('shellresource://') || url.startsWith('file:///ecpweb/page/')) {
      let responseWeb: WebResourceResponse = new WebResourceResponse()
      let webData = ECPResHelper.getShellResource(url)
      let heads: Header[] = [
        { headerKey: "Access-Control-Allow-Origin", headerValue: "*" },
        { headerKey: "Content-Type", headerValue: this.getMimeType(url) },
        { headerKey: "Access-Control-Allow-Headers", headerValue: "content-type,x-requested-with,ecpweb-sessionid,x-forwarded-for,X-Encrypted-By" },
        { headerKey: "Access-Control-Expose-Headers", headerValue: "*" },
      ]
      responseWeb.setResponseData(webData)
      responseWeb.setResponseHeader(heads);
      responseWeb.setResponseEncoding('utf-8');
      responseWeb.setResponseMimeType(this.getMimeType(url));
      responseWeb.setResponseCode(200);
      responseWeb.setReasonMessage('OK');
      return responseWeb
    }
    return null
}

更多关于Web组件加载本地网页,网页中的http请求报跨域错误(HarmonyOS 鸿蒙Next)的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于Web组件加载本地网页,网页中的http请求报跨域错误(HarmonyOS 鸿蒙Next)的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next系统中,Web组件加载本地网页时,如果网页中的HTTP请求报跨域错误,通常是由于浏览器的同源策略限制所致。鸿蒙Next的Web组件基于Chromium内核,默认情况下会强制执行同源策略,禁止跨域请求。

要解决这个问题,可以通过以下几种方式:

  1. 本地服务器代理:在本地搭建一个代理服务器,将所有跨域请求通过该服务器转发。这样,浏览器会认为请求是同源的,从而绕过跨域限制。

  2. CORS配置:如果目标服务器支持CORS(跨域资源共享),可以在服务器端配置Access-Control-Allow-Origin响应头,允许特定的域名或所有域名进行跨域访问。

  3. 修改Web组件设置:在鸿蒙Next的Web组件中,可以通过设置WebSettings来允许跨域请求。例如,使用setAllowUniversalAccessFromFileURLs(true)来允许从文件URL加载的网页进行跨域请求。

  4. 使用本地文件协议:将网页资源打包到本地,并使用file://协议加载,这样可以避免跨域问题。但是,这种方式可能会限制网页的功能和灵活性。

  5. 禁用同源策略:在开发环境中,可以通过启动参数或开发者工具禁用同源策略,但这不适用于生产环境。

需要注意的是,这些方法各有优缺点,具体选择应根据实际需求和安全性考虑来决定。

回到顶部