我有一个预传Mapbox站点，我已经在本地运行了一段时间，没有出现错误。然后出现此错误。
DOMException: The operation is insecure.
Firefox控制台称其来自mapbox util.js，上面写着
// console isn't defined in some WebWorkers, see #2558
if (typeof console !== "undefined") console.warn(message);
warnOnceHistory[message] = true;
我不知道是什么触发了这个WarnOnce函数。我没有使用Service Worker或Manifest。
上面的util.js引用了一个Mapbbox问题#2558。据我所知，我还没有做任何扰乱网络工作者范围的事情。
错误代码通常显示在中
SecurityError: The operation is insecure.
在firefox专用浏览器中，它显示错误，并且不加载其余的mapbox-gl函数。在Chrome、Safari和Edge中，它不会显示错误，只是拒绝加载其余的mapbox gl函数。
如果重新加载页面，则会运行其余的函数。但对于第一次访问的用户，页面不会加载。
这是一款更大的应用程序，带有Material Ui可滑动抽屉，与包裹捆绑在一起。
但这是我的index.html
<!DOCTYPE html>
<head>
<meta charset=utf-8/>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<title>Title</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://* blob: data:; script-src https://* 'sha256-NwPGqa9Mxa7ZIeBSPi4K97Vtt3uBWjwtJsUlZfeqG5E' 'unsafe-eval'; style-src 'unsafe-inline' https://*; child-src blob: ; connect-src https://*;">
<link rel="shortcut icon" href="../icons/icon.svg" type="image/x-icon">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.3.0/mapbox-gl-draw.css' type='text/css' />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="styles.css"></link>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jost"></link>
</head>
<body>
<div id="map"></div>
<div id="app"></div>
<script src="app.js" type="module" ></script>
</body>
</html>
也有人向heroku提出了一个请求。
export default (url) => {
return $.ajax({
dataType: "json",
url: (url),
success: function (res) {
return res
}
});
}
将其设置为localhost并不能消除错误。
任何关于引发此错误的想法都将不胜感激。
这不是一个完整的答案，但可能会有所帮助。
我在Firefox控制台中也出现了同样的错误。不幸的是，它相当模糊：
ERROR DOMException: The operation is insecure. core.js:4442
Angular 4
RxJS 5
Angular 20
RxJS 14
Angular 15
a scripts.js:2
watch scripts.js:2
a scripts.js:2
trigger scripts.js:2
open scripts.js:2
handle Angular
RxJS 17
我尝试了铬控制台，它显示了这一点：
ERROR DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
这对我的情况更有帮助。也许它可以在您的情况下显示更详细的错误消息。
希望能有所帮助。