时间戳

首页 > 解决方案 > 地图框JS未加载

javascript - 地图框JS未加载

问题描述

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

在 chrome 中，在控制台中出现错误。请找到下面的图片以供参考 在此处输入图像描述

请帮助解决此问题。

谢谢。

标签： javascriptnode.jsexpresspugmapbox-gl-js

解决方案

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

有关详细信息，请参阅此： CSP 指令

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

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(); 
});

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

推荐阅读