OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

QWebEngineView error "The server responded with a non-JavaScript MIME type of """

  • Thread starter Thread starter Jepessen
  • Start date Start date
J

Jepessen

Guest
I want to create a widget that shows an OpenLayers map.

I've created an instance of QWebEngineView, and I've set the url to an index.html file that have the content:

Code:
QWebEngineView* m_webView;
m_webView = new QWebEngineView(this);
m_webView->load(QUrl("file:///web/index.html"));

The folder with the executable has a subfolder named web, and inside of it there's the index.html, the main.js and the node_modules folder with ol library.

Code:
myfolder
|
|-mymap.exe
|-web/
  |-index.html
  |-main.js
  |-node_modules
    |-ol stuff

This is my index.html

Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Earthquakes in KML</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="node_modules/ol/ol.css">
</head>
<body>
    <div id="map" class="map">
        <div id="info"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script type="module" src="main.js"></script>
</body>
</html>

This is my main.js

Code:
import KML from 'ol/format/KML.js';
import Map from 'ol/Map.js';
import StadiaMaps from 'ol/source/StadiaMaps.js';
import VectorSource from 'ol/source/Vector.js';
import View from 'ol/View.js';
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style.js';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer.js';

const styleCache = {};
const styleFunction = function (feature) {

... a lot of stuff...

The problem is that when I try to run the application, I obtain the following error in the console, and the widget is empty:

Code:
js: Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.
[14212:37720:0628/124752.880:INFO:CONSOLE(0)] "Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.", source: file:///web/main.js (0)

I've think that's something related to CORS, so I've created an interceptor for using it with QWebEngineView:

Code:
...
void Interceptor::interceptRequest(QWebEngineUrlRequestInfo& info) {
    qDebug() << "first party url: " << info.firstPartyUrl();
    info.setHttpHeader("Access-Control-Allow-Origin", "*");
}
...
auto interceptor = new Interceptor(this);
m_webView->page()->profile()->setUrlRequestInterceptor(interceptor);
m_webView->load(QUrl("file:///web/index.html"));

But nothing changes.

What I'm doing wrong? How can I show the web page correctly?

I'm using Qt 5.15.2 with Windows/Visual Studio.

<p>I want to create a widget that shows an <a href="https://openlayers.org/" rel="nofollow noreferrer">OpenLayers</a> map.</p>
<p>I've created an instance of <code>QWebEngineView</code>, and I've set the url to an <code>index.html</code> file that have the content:</p>
<pre><code>QWebEngineView* m_webView;
m_webView = new QWebEngineView(this);
m_webView->load(QUrl("file:///web/index.html"));
</code></pre>
<p>The folder with the executable has a subfolder named <code>web</code>, and inside of it there's the <code>index.html</code>, the <code>main.js</code> and the <code>node_modules</code> folder with <code>ol</code> library.</p>
<pre><code>myfolder
|
|-mymap.exe
|-web/
|-index.html
|-main.js
|-node_modules
|-ol stuff
</code></pre>
<p>This is my <code>index.html</code></p>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Earthquakes in KML</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/ol/ol.css">
</head>
<body>
<div id="map" class="map">
<div id="info"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script type="module" src="main.js"></script>
</body>
</html>
</code></pre>
<p>This is my <code>main.js</code></p>
<pre><code>import KML from 'ol/format/KML.js';
import Map from 'ol/Map.js';
import StadiaMaps from 'ol/source/StadiaMaps.js';
import VectorSource from 'ol/source/Vector.js';
import View from 'ol/View.js';
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style.js';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer.js';

const styleCache = {};
const styleFunction = function (feature) {

... a lot of stuff...
</code></pre>
<p>The problem is that when I try to run the application, I obtain the following error in the console, and the widget is empty:</p>
<pre><code>js: Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.
[14212:37720:0628/124752.880:INFO:CONSOLE(0)] "Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.", source: file:///web/main.js (0)
</code></pre>
<p>I've think that's something related to CORS, so I've created an interceptor for using it with <code>QWebEngineView</code>:</p>
<pre><code>...
void Interceptor::interceptRequest(QWebEngineUrlRequestInfo& info) {
qDebug() << "first party url: " << info.firstPartyUrl();
info.setHttpHeader("Access-Control-Allow-Origin", "*");
}
...
auto interceptor = new Interceptor(this);
m_webView->page()->profile()->setUrlRequestInterceptor(interceptor);
m_webView->load(QUrl("file:///web/index.html"));
</code></pre>
<p>But nothing changes.</p>
<p>What I'm doing wrong? How can I show the web page correctly?</p>
<p>I'm using Qt 5.15.2 with Windows/Visual Studio.</p>
 
Top