MapboxGL报net::ERR_BLOCKED_BY_RESPONSE 200跨域错误解决

问题背景 #

项目接入MapboxGL实现地图加载功能时，已配置Content-Security-Policy的前提下，浏览器控制台抛出上述跨源拦截错误，地图无法正常渲染。

项目现有相关代码 #

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

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

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

错误根因 #

该报错属于COEP（跨源嵌入者策略）拦截，和已配置的CSP规则无直接关联，现有配置存在三个核心问题：

• 引入Mapbox静态资源的标签未声明跨源加载属性，浏览器默认按同源规则校验资源响应
• CSP配置缺失Mapbox运行必需的Worker、瓦片、长连接源白名单
• 若服务全局开启了Cross-Origin-Embedder-Policy: require-corp强校验，未给跨源资源配置对应许可头就会触发拦截

分步解决 #

• 第一步：修改静态资源引入标签，给Mapbox的JS、CSS标签添加crossorigin="anonymous"属性，告知浏览器按跨源模式请求资源，不强制走同源校验：

block append head 
  script(src='https://api.mapbox.com/mapbox-gl-js/v2.8.1/mapbox-gl.js' crossorigin="anonymous")
  link(rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/v2.8.1/mapbox-gl.css' crossorigin="anonymous")

• 第二步：补全修正CSP配置，替换原有CSP规则，补全缺失的worker、图片、连接类白名单：

.set(
  'Content-Security-Policy',
  "default-src 'self' https://*.mapbox.com https://api.mapbox.com; base-uri 'self'; block-all-mixed-content; font-src 'self' https: data:; frame-ancestors 'self'; img-src 'self' data: blob: https://*.mapbox.com; 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'; worker-src 'self' blob: https://*.mapbox.com; connect-src 'self' https://*.mapbox.com https://api.mapbox.com wss://*.mapbox.com; upgrade-insecure-requests;"
)

新增配置项说明：

• worker-src：放行Mapbox用于解析瓦片的Web Worker加载
• img-src补充blob和Mapbox源：放行瓦片图片、本地生成的标记类图片资源
• connect-src：放行Mapbox接口请求、WebSocket实时服务连接
• 第三步：调整COEP策略配置。如果项目全局配置了Cross-Origin-Embedder-Policy: require-corp，且不需要SharedArrayBuffer等强隔离特性，可以直接移除该全局配置；如果需要保留强隔离，将值改为Cross-Origin-Embedder-Policy: credentialless即可，无需额外给Mapbox资源配置CORP头。

校验注意点 #

如果项目中存在自定义GeoJSON、自托管瓦片等其他跨源资源，需要确保对应资源服务端返回合法的CORS响应头，否则仍会触发跨源拦截。

内容的提问来源于stack exchange，提问作者kalx11