CODEWITHSUNDEEP
javascriptqtpyqtpyside6qwebengineview
dancing_rabbit_2442
dancing_rabbit_2442

Reputation: 1

PySide6 QWebEngineView: External Fetch Requests failing

I'm working on a project where I use PySide6's QWebEngineView to display a D3.js graph visualization that requires data from a Neo4j database. The HTML page uses JavaScript's fetch API to post a request to the Neo4j HTTP endpoint and visualize the returned data using D3.js.

When I run the HTML page in a standard web browser, everything works as expected: the data is fetched from the Neo4j database, and the graph is rendered correctly. However, when I try to load the same HTML page within a PySide6 QWebEngineView, the fetch request fails with the following JavaScript console error:

JS Console(JavaScriptConsoleMessageLevel.ErrorMessageLevel): Error fetching data: TypeError: Failed to fetch

Here is the relevant part of my HTML code that performs the fetch operation:

<script>
    async function fetchGraphData() {
        const url = 'http://localhost:7474/db/neo4j/tx/commit'; // Neo4j HTTP endpoint
        const username = 'neo4j';
        const password = 'test';

        try {
            const response = await fetch(url, {
                method: 'POST',
                mode: 'cors',
                headers: {
                    'Authorization': 'Basic ' + btoa(username + ':' + password),
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    "statements": [{
                        "statement": "MATCH (n)-[r]->(m) RETURN n, r, m LIMIT 25"
                    }]
                })
            });

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const data = await response.json();
            console.log(data);
            // Further processing...
        } catch (error) {
            console.error('Error fetching data:', error);
        }
    }

    fetchGraphData();
</script>

And this is the simplified PySide6 setup where I load the HTML into the QWebEngineView:

from PySide6.QtWebEngineWidgets import QWebEngineView, QWebEngineSettings
from PySide6.QtCore import QUrl
import os

class MyGraphView(QWebEngineView):
    def __init__(self):
        super().__init__()
        self.init_ui()

    def init_ui(self):
        settings = self.settings()
        settings.setAttribute(QWebEngineSettings.WebAttribute.JavascriptEnabled, True)
        settings.setAttribute(QWebEngineSettings.WebAttribute.LocalContentCanAccessRemoteUrls, True)
        settings.setAttribute(QWebEngineSettings.WebAttribute.AllowRunningInsecureContent, True)

        self.load(QUrl.fromLocalFile("/path/to/my/html/file.html"))

if __name__ == '__main__':
    # App initialization and execution logic

Additionally, to debug the issue further, I attempted to enable QWebEngine's remote debugging feature with the following environment variable:

os.environ['QTWEBENGINE_REMOTE_DEBUGGING'] = "0.0.0.0:9222"

However, when I try to connect to the debugging interface, I encounter another issue with the WebSocket connection being rejected:

Rejected an incoming WebSocket connection from the http://localhost:9222 origin. Use the command line flag --remote-allow-origins=http://localhost:9222 to allow connections from this origin or --remote-allow-origins=* to allow all origins.

To resolve this, I attempted to append command line flags to disable web security and allow remote origins as follows:

if __name__ == "__main__":
    # Application setup
    sys.argv.append("--disable-web-security")
    sys.argv.append("--remote-allow-origins=http://localhost:9222")
    # Additional setup and application execution logic

Despite these efforts, the issues persist. The JavaScript fetch operation fails within the QWebEngineView, and I'm unable to successfully connect to the remote debugging interface due to the WebSocket connection being rejected.

Upvotes: 0

Views: 194

Answers (1)

dancing_rabbit_2442
dancing_rabbit_2442

Reputation: 1

I still cant get a fetch operation working but I figured out how to fix the problem with remote debugging. As mentioned in here: "Any WebEngine command line options should be specified after the --webEngineArgs option, which is used to separate the user's application specific options from the WebEngine's ones."

So I added this to my code:

sys.argv.append('--webEngineArgs')
sys.argv.append('--remote-allow-origins=*')

app = QApplication(sys.argv)

Upvotes: 0

Related Questions