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')Refused to load the script 'https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
I bumped into this issue today. I know you might have been answered now. But still below is your answer : Credits Donglin-
Sending CSP headers to allow scripts from mapbox to be loaded. Sample below :
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
});
});
In response to the initial question by @Veera, I believe you encountered this problem when taking the course: Node.js, Express, MongoDB & More: The Complete Bootcamp
As mentioned earlier, it is a CSP-Content Security Policy that prevents browsers from loading content (images, scripts, videos etc) from unsupported sources.
You can solve this problem by adding api.mapbox.com as a supported source in your project. The code below is my router file for handling routes that make use of 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;This particular error is a CSP error that I personally have answered on the git repo as well as the udemy lecture..Nonetheless here it goes again for the Stackoverflow version :)
Add the following code to you 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();
});