问题描述
嗨,我正在使用 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();
});
将来,如果某些内容停止工作,请检查浏览器窗口并在控制台中查看,您只需要将其他一些可信来源列入白名单。