地图框JS未加载 - 编程之家

如何解决地图框JS未加载

嗨，我正在使用 pug 开发 NodeJS 项目。无法从 pug 模板加载 api https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js 文件。

在 chrome 中，在控制台中出现错误。请找到以下图片以供参考

请帮助解决此问题。

谢谢。

解决方法

没有代码就很难回答。但是好像因为安全问题加载不了。卡巴斯基也参与其中。

也许尝试编辑metq

“mapboxlg”未定义

也许是因为 CDN 只允许 HTTPS 请求，并且给定您的本地主机开发链接，它只是 HTTP 而对于 CDN 来说它不安全。

这只是猜测，因为你又没有输入任何代码

您需要在页面的 res 标头中为 csp 白名单指定主机。

请参阅此处了解详细信息： CSP directives

在遇到同样的问题并研究了一天之后，这对我有用：在渲染页面之前，设置标题如下：

res.set({
'Content-Security-Policy': `default-src 'self' http: https:;block-all-mixed-content;font-src 'self' https: data:;frame-ancestors 'self';img-src 'self' data: blob:;object-src 'none';script-src 'self' https://api.mapbox.com https://cdn.jsdelivr.net 'unsafe-inline' 'unsafe-eval';script-src-elem https: http: ;script-src-attr 'self' https://api.mapbox.com https://cdn.jsdelivr.net 'unsafe-inline';style-src 'self' https://api.mapbox.com https://fonts.googleapis.com 'unsafe-inline';worker-src 'self' blob:`
});

现在，您可以在渲染每个页面之前继续执行此操作，也可以将此代码放置在主应用程序的中间件中，就在您定义用于渲染 html 页面的路由器之前。

像这样：

<appName>.use( (req,res,next)=>{ 
res.set....//as done above
next(); 
});

将来，如果某些内容停止工作，请检查浏览器窗口并在控制台中查看，您只需要将其他一些可信来源列入白名单。