Jonas Schmidtmann的NodeJS与Express课程中Mapbox加载报错求助

这个报错核心是浏览器跨源嵌入政策（COEP）与Mapbox资源的跨源资源政策（CORP）不匹配导致的，以下是几种可行解决方法：

• 调整服务器COEP响应头
  若你在Express服务器中设置了Cross-Origin-Embedder-Policy: require-corp，Mapbox资源因未配置符合要求的CORP头会被浏览器拦截，可做两种调整：

  • 开发环境直接关闭严格COEP限制：

    // 使用helmet中间件时修改配置
    const helmet = require('helmet');
    app.use(helmet({
      crossOriginEmbedderPolicy: false,
    }));
    

  • 生产环境针对Mapbox请求单独放宽限制：

    app.use((req, res, next) => {
      if (req.url.includes('mapbox')) {
        res.setHeader('Cross-Origin-Embedder-Policy', 'unsafe-none');
      } else {
        res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
      }
      next();
    });
    

• 给Mapbox的script标签添加crossorigin属性
  在引入Mapbox JS资源的script标签里加上crossorigin="anonymous"，让浏览器以正确跨域模式请求资源：

  <script src="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js" crossorigin="anonymous"></script>
  

• 升级Mapbox GL JS版本
  你使用的v2.9.1版本较旧，可能未适配最新跨域政策。尝试升级到v2.15.0及以上版本，新版本通常会修复这类跨域兼容问题。

• 本地托管Mapbox资源（临时应急方案）
  下载对应版本的Mapbox GL JS和CSS文件到项目静态资源目录，从本地路径引入，彻底规避跨域问题：

  <script src="/static/mapbox-gl.js"></script>
  <link rel="stylesheet" href="/static/mapbox-gl.css">
  

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