尝试加载MapBox时收到错误信息-前端问题

getting error message while try to load mapbox(尝试加载MapBox时收到错误信息)

本文介绍了尝试加载MapBox时收到错误信息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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’，因为它违反了以下内容安全策略指令：&script-src‘self’"；。请注意，未显式设置‘script-src-elem’，因此将‘script-src’用作备用。

推荐答案

我今天遇到了这个问题。我知道你现在可能已经有人接了。但下面仍然是你的答案：信用东林-

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

这篇关于尝试加载MapBox时收到错误信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！