mapboxgl 上的“net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200”

Question

我正在尝试将地图放入我的项目中，并从浏览器控制台遇到此问题。'net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200'

这是我的代码中使用 mapbox 的地方。

首先，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 });
});

第二，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',
});

第三，在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')

Answer 1

看来您正在参加 Jonas 的完整节点训练营课程，我之前遇到过同样的问题，我不是安全专家，但我能够通过配置helmet库来解决它：

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

您可以明确地使用指令，而不是使用通配符。