"net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200" on mapboxgl

user_19397881 0
Viewed 265

I'm trying to put a map in my project and having this issue from browser console. 'net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200'

here's where mapbox is used in my code.

first, viewController.js file :

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

second, 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',
});

third, in tour.pug file :

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')

mapbox-gl node.js javascript
2 Answers

seem you're taking a complete node bootcamp course by Jonas, I faced the same issue before, I'm not a security expert but I was able to resolve it by configuring helmet library:

app.use(
    helmet({
        crossOriginEmbedderPolicy: false,
        crossOriginResourcePolicy: {
            allowOrigins: ['*']
        },
        contentSecurityPolicy: {
            directives: {
                defaultSrc: ['*'],
                scriptSrc: ["* data: 'unsafe-eval' 'unsafe-inline' blob:"]
            }
        }
    })
)

You can be explicit with the directives instead of using a wildcard.

user_121873460

Add (type="text/javascript") to the script:

script(type="text/javascript" src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js')
user_195637670
Related