尝试加载 mapbox 时收到错误消息答案

【问题标题】：getting error message while try to load mapbox尝试加载 mapbox 时收到错误消息
【发布时间】：2021-06-13 11:35:25
【问题描述】：

mapboxgl.accessToken = 'xxxxxxxx';

var map = new mapboxgl.Map({
  container: 'map', // container ID
  style: 'mapbox://styles/mapbox/streets-v11', // style URL
});

doctype html
html
  head
    block head
      meta(charset='UTF-8') 
      meta(name='viewport' content='width=device-width, initial-scale=1.0')
      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')
      title Natours | #{title} 


  body
      //- HEADER 
      include _header

      //- CONTENT
      block content
        h1 this is a placeholder heading

      //- FOOTER
      include _footer
      
      script(src='/javascript/mapbox.js')

拒绝加载脚本“https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js”，因为它违反了以下内容安全策略指令：“脚本-src‘自我’”。请注意，'script-src-elem' 没有显式设置，因此 'script-src' 用作备用。

【问题讨论】：

标签： javascript node.js express pug

【解决方案1】：

在回答@Veera 最初的问题时，我相信您在学习课程时遇到了这个问题：Node.js、Express、MongoDB & More: The Complete Bootcamp

如前所述，它是一种CSP 内容安全策略，可防止浏览器从不受支持的来源加载内容（图像、脚本、视频等）。

您可以通过在项目中添加 api.mapbox.com 作为支持的源来解决此问题。下面的代码是我的路由文件，用于处理使用 Mapbox 的路由。

const express = require('express');
const viewController = require('../controllers/viewController');

const CSP = 'Content-Security-Policy';
const POLICY =
  "default-src 'self' https://*.mapbox.com ;" +
  "base-uri 'self';block-all-mixed-content;" +
  "font-src 'self' https: data:;" +
  "frame-ancestors 'self';" +
  "img-src http://localhost:8000 'self' blob: data:;" +
  "object-src 'none';" +
  "script-src https: cdn.jsdelivr.net cdnjs.cloudflare.com api.mapbox.com 'self' blob: ;" +
  "script-src-attr 'none';" +
  "style-src 'self' https: 'unsafe-inline';" +
  'upgrade-insecure-requests;';

const router = express.Router();

router.use((req, res, next) => {
  res.setHeader(CSP, POLICY);
  next();
});

router.route('/').get(viewController.getOverview);
router.route('/tour/:slug').get(viewController.getTour);
router.route('/login').get(viewController.getLoginForm);

module.exports = router;

【讨论】：

【解决方案2】：

这个特定的错误是我个人在 git repo 和 udemy 讲座上回答的 CSP 错误。不过这里又是 Stackoverflow 版本：)

将以下代码添加到你的 app.js

app.use((req, res, next) => {
  res.setHeader(
    'Content-Security-Policy',
    "script-src  'self' api.mapbox.com",
    "script-src-elem 'self' api.mapbox.com",
  );
  next();
});

【讨论】：

请修正错字

【解决方案3】：

我今天碰到了这个问题。我知道你现在可能已经得到了答复。但下面仍然是你的答案：学分东林-

https://www.udemy.com/course/nodejs-express-mongodb-bootcamp/learn/lecture/15065656#questions/12020720

发送 CSP 标头以允许加载来自 mapbox 的脚本。下面的示例：

exports.getTour = catchAsync(async (req, res, next) => {
  const tour = await Tour.findOne({ slug: req.params.slug }).populate({
    path: 'reviews',
    fields: 'review rating user'
  });
  res
    .status(200)
    .set(
      'Content-Security-Policy',
      "default-src 'self' https://*.mapbox.com ;base-uri 'self';block-all-mixed-content;font-src 'self' https: data:;frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src https://cdnjs.cloudflare.com https://api.mapbox.com 'self' blob: ;script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests;"
    )
    .render('tour', {
      title: `${tour.title} Tour`,
      tour
    });
});

【讨论】：