地图框JS未加载

Question

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

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

请帮助解决这个问题。

谢谢。

Answer 1

没有代码就很难回答。但由于安全问题，它似乎无法加载。卡巴斯基也参与其中。

也许尝试编辑metq

“ma​​pboxlg”未定义

可能是因为 CDN 只允许 HTTPS 请求，并且给定您的 localhost 开发链接，它只有 HTTP，而对于 CDN，它并不安全。

这只是猜测，因为你没有放任何代码

Answer 2

您需要在页面的 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(); 
});

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