Mapbox-gl-js返回Not Found(null状态)引发CORS错误如何解决

这个CORS报错和API密钥、代码写法没有关系，本质是events.mapbox.com这个Mapbox遥测上报域名被拦截了。
Mapbox SDK默认会向这个域名发送匿名使用统计数据，一旦这个域名被拦截，浏览器发起的跨域请求会被直接掐断，就会抛出你看到的CORS request did not succeed、状态码为(null)的报错。你直接访问这个链接返回{"message":"Not Found"}是正常现象，这个接口本身就不接受普通的浏览器直接GET访问，只有SDK携带特定请求头上报时才会正常响应。
常见的拦截来源包括：

• 浏览器安装的广告拦截、隐私保护类插件（比如uBlock Origin、AdGuard、隐私獾等），这类插件默认会屏蔽第三方统计上报类域名
• 本地自定义的hosts规则、网络运营商的域名屏蔽策略、公司内网防火墙规则

打开浏览器开发者工具，切换到网络面板筛选events.mapbox.com相关请求，如果请求状态显示为blocked，或者用浏览器访客模式（默认禁用所有扩展）打开项目后报错消失，就可以确认是拦截导致的问题。

• 如果你不介意遥测上报：给对应的拦截插件、网络规则加白名单，放行events.mapbox.com域名即可，报错会直接消失，不影响地图其他功能
• 如果你不想开启遥测上报：直接在代码里全局关闭Mapbox的遥测功能，SDK就不会再发起这个上报请求，从根源上避免报错。不管是用原生mapbox-gl还是react-map-gl，都可以在项目入口文件初始化时加一行全局配置：

  import mapboxgl from 'mapbox-gl';
  // 关闭遥测上报
  mapboxgl.setTelemetryEnabled(false);
  

  加完配置后重启开发服务即可生效。
• 顺带排查：create-react-app读取.env文件的环境变量是在服务启动时加载的，如果你修改过.env里的密钥配置，记得重启本地开发服务，否则新的环境变量不会生效。不过如果是环境变量没加载对，一般会同时报地图瓦片、样式资源的加载错误，不会只出遥测接口的报错。

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