Estoy tratando de poner un mapa en mi proyecto y tengo este problema desde la consola del navegador. 'net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200'
aquí es donde se usa mapbox en mi código.
primero, el archivo viewController.js:
const Tour = require('../models/tourModel'); const catchAsync = require('../utils/catchAsync'); exports.getOverview = catchAsync(async (req, res) => { // 1) Get tour data from collection const tours = await Tour.find(); // 2) Build template // 3) Render that template using tour data from 1) res.status(200).render('overview', { title: 'All Tours', tours, }); }); exports.getTour = catchAsync(async (req, res) => { // 1) Get the data for the requested tour (including reviews and guides) const tour = await Tour.findOne({ slug: req.params.slug }).populate({ path: 'reviews', fields: 'review rating user', }); // 2) Build template // 3) Render template using data from 1) 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.name} Tour`, tour }); });segundo, mapbox.js:
/* eslint-disable */ console.log('hello from mapbox'); const locations = JSON.parse(document.getElementById('map').dataset.locations); console.log(locations); mapboxgl.accessToken = 'pk.eyJ1IjoiZ3Vpem91bCIsImEiOiJjbDRwc2l0Ym0wa2cyM2ZuNWg5YmRyNnZqIn0.SXiA03dqWzSiUHckPEY1Bw'; var map = new mapboxgl.Map({ container: 'map', // ID style: 'mapbox://styles/mapbox/streets-v11', });tercero, en el archivo tour.pug:
block append head script(src='https://api.mapbox.com/mapbox-gl-js/v2.8.1/mapbox-gl.js') link(rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/v2.8.1/mapbox-gl.css')