WebEngineView cannot load external js from http

charlie2024 · 17 Apr 2024, 01:19

Hi! So I want to embed a map in my application using WebEngineView. Here is my html and QML code:

check.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test Mapbox GL JS Load</title>
    <link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js" onerror="console.error('Import failure')"></script>
</head>
<body>
    <h1>Testing Mapbox GL JS Load</h1>
    <div id="result"></div>

    <script>
        function checkMapboxGLJS() {
            const resultElement = document.getElementById('result');
            if (window.mapboxgl) {
                resultElement.innerHTML = "Mapbox GL JS is loaded successfully.";
                console.log("Mapbox GL JS is loaded successfully.");
            } else {
                resultElement.innerHTML = "Failed to load Mapbox GL JS.";
                console.error("Failed to load Mapbox GL JS.");
            }
        }

        // Ensure the check runs after the library should have loaded
        window.onload = checkMapboxGLJS;
    </script>
</body>
</html>

mapview.qml

import QtQuick 2.15
import QtWebEngine 1.8

import "../../shared"

Item {
    anchors.fill: parent
    anchors.centerIn: parent
    Text {
        text: "Map"
        anchors.centerIn: parent
        font.pixelSize: 60
    }

    WebEngineView {
        anchors.fill: parent
        url: Qt.resolvedUrl("./check.html") // Adjust the path to where your HTML file is located
        // url: "http://google.com"

        onLoadingChanged: function(loadingInfo) {
            // if (loadingInfo.status == WebEngineView.LoadFailedStatus) {
            console.log("Load info: " + loadingInfo.errorString);
            // }
        }
    }
}

When running these scripts, I got qml: Load info: The webpage at <strong jscontent="failedUrl"></strong> might be temporarily down or it may have moved permanently to a new web address.

I have tried moving the loading part into QML as well, and also got an import error. It's frustrating but I cannot get more detailed information on why the import failed.

This HTML file can be loaded in Chrome, and my QML app can also access http://google.com, so I think it's some kind of permission issue. Weirdly I can't seem to find the exact solution online either, although I thought this should be a pretty common problem.

Any help is appreciated!

charlie2024 · wrote on 17 Apr 2024, 01:19

@charlie2024 Friends! I fixed this. Turned out we need to add this line to WebEngineView.

        settings {
            localContentCanAccessRemoteUrls: true
        }

This is the problem: https://www.telerik.com/blogs/all-you-need-to-know-cors-errors