H5调用出现跨域问题，HarmonyOS鸿蒙Next如何解决？

H5调用出现跨域问题，HarmonyOS鸿蒙Next如何解决？ H5调用出现跨域问题：日志错误：Access to fetch at ‘http://192.168.xx.xx/test.php’ from origin ‘http://xxx.xxx’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource

3 回复

参考下以下方法：

（1）可以使用web组件的loadData接口，用于加载指定的数据，该接口的参数baseUrl可以实现：入参baseUrl可以指定的一个URL路径（“http”/“https”/"data"协议），并由Web组件赋值给window.origin。通过该接口更改协议可以解决跨域问题。

（2）通过customizeSchemes接口，isSupportCORS表示是否支持跨域请求。schemeName表示自定义协议名称。

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5#customizeschemes

更多关于H5调用出现跨域问题，HarmonyOS鸿蒙Next如何解决？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，H5调用出现跨域问题时，可以通过以下方式解决：

  1. 使用<meta>标签设置CSP：在H5页面的<head>标签中添加<meta>标签，设置Content-Security-Policy（CSP）以允许跨域请求。例如：

    <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://example.com;">

  2. 配置WebView的跨域设置：在鸿蒙应用中使用WebView加载H5页面时，可以通过WebView的setMixedContentMode方法设置混合内容模式，允许加载跨域资源。例如：

    WebView webView = new WebView(this);
webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

  3. 使用<iframe>标签的sandbox属性：在H5页面中使用<iframe>标签加载跨域内容时，可以通过sandbox属性设置允许的跨域操作。例如：

    <iframe src="https://example.com" sandbox="allow-scripts allow-same-origin"></iframe>

  4. 服务器端配置CORS：在服务器端配置Access-Control-Allow-Origin头信息，允许指定域名的跨域请求。例如：

    Access-Control-Allow-Origin: https://example.com

  5. 使用JSONP跨域请求：在H5页面中使用JSONP进行跨域请求，通过动态创建<script>标签加载跨域资源。例如：

    function handleResponse(data) {
    console.log(data);
}
var script = document.createElement('script');
script.src = 'https://example.com/api?callback=handleResponse';
document.body.appendChild(script);

以上方法可以根据具体需求选择使用，以解决H5调用出现的跨域问题。

在HarmonyOS鸿蒙Next中，解决H5调用跨域问题可以通过配置CORS（跨域资源共享）策略。首先，确保服务器端在响应头中添加Access-Control-Allow-Origin，允许指定域名或*（所有域名）进行跨域访问。其次，开发者可以在鸿蒙应用中使用fetch或XMLHttpRequest时，设置withCredentials为true以支持携带凭证的跨域请求。此外，鸿蒙还提供了网络代理功能，可以通过代理服务器转发请求，绕过跨域限制。

回到顶部