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')Se negó a cargar el script 'https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js' porque infringe la siguiente directiva de Política de seguridad de contenido: "script-src 'self'" . Tenga en cuenta que 'script-src-elem' no se configuró explícitamente, por lo que 'script-src' se usa como respaldo.
Me encontré con este problema hoy. Sé que podría haber sido respondido ahora. Pero aún debajo está tu respuesta: Credits Donglin-
Envío de encabezados CSP para permitir que se carguen los scripts de mapbox. Muestra a continuación:
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 }); });En respuesta a la pregunta inicial de @Veera, creo que se encontró con este problema al tomar el curso: Node.js, Express, MongoDB y más: el Bootcamp completo
Como se mencionó anteriormente, es una política de seguridad de contenido CSP que evita que los navegadores carguen contenido (imágenes, secuencias de comandos, videos, etc.) de fuentes no compatibles.
Puede resolver este problema agregando api.mapbox.com como una fuente admitida en su proyecto. El siguiente código es mi archivo de enrutador para manejar rutas que usan 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;Este error en particular es un error de CSP que personalmente he respondido en el repositorio de git, así como en la conferencia de udemy. Sin embargo, aquí va de nuevo para la versión de Stackoverflow :)
Agregue el siguiente código a su 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(); });