无法使用带有哈巴狗的 mapbox 显示地图答案

【问题标题】：Unable to display map using mapbox with pug无法使用带有哈巴狗的 mapbox 显示地图
【发布时间】：2020-10-13 02:59:46
【问题描述】：

正如上面显示的标题和图片，我无法在我的网站上显示地图。我四处寻找解决方案，但没有一个与我的相似。需要注意的一件事是我正在使用 pug（用 HTML 编写 JS 的模板）。这是下面显示的JS的代码

/* eslint-disable */
const locations = JSON.parse(document.getElementById("map").dataset.locations);

mapboxgl.accessToken = 'xxxxxx';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'xxxxxxx',
    center: [-118.315192, 34.006905],
    zoom: 10
});

这是我用来实现顶部代码以在我的网站上显示地图的代码。

    section.section-map
        //- Data-location set in dataset in mapbox.js
        #map(data-locations=`${JSON.stringify(tours.locations)}`)

这是我的主要内容

doctype html
html
    head
        block head
            meta(charset='UTF-8')
            meta(name='viewport' content='width=device-width, initial-scale=1.0' value="script-src 'self' api.mapbox.com;")
            title Natours | #{tours.name} Tour
            link(rel='stylesheet' href='/css/style.css')
            link(rel='shortcut icon' type='image/png' href='/img/favicon.png')
            link(rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,300i,700')

    body
        // HEADER

        include _header
        
        // CONTENT

        block content
            h1 This is a placeholder heading

        // FOOTER

        include _footer
            script(src="/js/mapbox.js")

【问题讨论】：

标签： javascript node.js pug mapbox

【解决方案1】：

您在标题上设置的内容安全策略似乎有问题..

在元标记内添加以下代码。

script-src 'self' api.mapbox.com;

更多信息Read Content Security Policy

因为 OP 使用第三方 npm 模块helmet ...

现在您可以按以下方式禁用头盔中的 CSP..

app.use(
  helmet({
    contentSecurityPolicy: false,
  })
);

更多阅读文档Helmet Docs

【讨论】：

你能举个例子如何添加它。我正在使用 pug 上下文可能会有所不同。这是我此刻的元标记 meta(name='viewport' content='width=device-width, initial-scale=1.0' value="script-src 'self' api.mapbox.com;")
您能否提供完整的元标记
我认为你在 nodejs 中使用 express 是一个动态添加 CSP 的 npm 模块。确保你使用的是 npm 模块头盔或类似的东西？
是的。我现在正在使用头盔。但它是空的。我需要在里面加入一些东西吗？
是的！它现在终于开始工作了。但顺便说一句，你现在是什么意思？

【解决方案2】：

您有一个内容安全策略缺少标题只需将此元标记放在适合我的标题中

<meta http-equiv="Content-Security-Policy" content="script-src 'self' api.mapbox.com;worker-src blob: ;connect-src https://*.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com">

【讨论】：