置并修改

mapbox没有token/token失效地图闪烁后空白报错Error:

valid

涉及领域Vue、SpingBoot、Docker、LLM、python等

---------------------------------------------------------------------

---------------------------------------------------------------------

mapbox没有token/token失效地图闪烁后空白报错Error:

valid

在使用mapbox地图的时候地图出现之后一瞬间就变成空白F12打开控制台发现报错

Failed

JS需要有效的Mapbox访问令牌。

要创建帐户或新的访问令牌请访问https://account.mapbox.com/

这个错误是说你的mapbox验证令牌token失效了需要到官网https://account.mapbox.com/重新申请一个。

但是申请非常不方便。

本文将介绍一种符合程序员优雅美学的暴力破解方法非常简单。

二、mapbox去除token验证

进入node_modules文件夹往下滑找到mapbox-gl文件夹不是mapbox文件夹。

2、找到mapbox-gl.js文件

在mapbox-gl文件夹下按照如下的文件层级找到mapbox-gl.js文件

3、找到对应位置并修改

搜索“this._requestManager._customAccessToken”

可能具体内容随着mapbox版本内容的差异有细微的变化但mapbox3.x版本基本都有这个结构。

它的作用就是对你的token请求进行判断如果含token的请求在mapbox服务器对应接口上没有拿到数据返回状态码是401即token无效那么就报错A

valid

到这里看懂了之后修改就很简单了直接将e改成false利用JavaScript的短路规则直接跳过后续e.messageCe||401e.status部分的判断那么就能解决问题咯。

修改完并保存

最后还有一步我们要知道项目一旦启动过就会生成依赖缓存文件后续启动只会更新代码更新的部分不会检查依赖库的代码是否变化所以需要清除依赖缓存文件这里用vue3vite项目做示范找到node_modules文件夹在其中找到.vite文件夹将其删掉重新运行项目即可。

Vue

CLI那么就需要在这个目录下寻找缓存文件夹并删除node_modules/.cache。

5、问题解决

解决思路其实很简单页面闪烁闪烁前瞬间是能加载地图的说明本地服务拿到了数据但是出于某种原因被隐藏掉了如果在向mapbox请求数据的过程就被拦截了那么绝不可能出现闪烁的情况而是直接显示空白。

既然本地已经拿到了数据那么只需要找到拦截的部分并将拦截部分的代码改掉那么理论上就能正常显示地图。

同时由于错误信息中提到了“***

server

()”代表服务器返回了一个状态码为401的响应正确的状态码应该是200。

那么直接在源码中搜索401这么一大段代码里面一共只有5个地方出现过401挨个检查一遍其中有三个401是一大串数字中的一部分剩下两个一个对应的报错是“you

may

https://docs.mapbox.com/api/overview/#access-tokens-and-token-scopes”另一个对应的报错是“A

valid

https://account.mapbox.com/”。

再结合具体的报错信息就能定位问题所在。

四、总结

本博客介绍了mapbox如何去除token验证暴力破解mapbox的token验证机制。

一劳永逸解决mapbox地图闪现一下然后变成空白报错Error:

valid

只有锻炼思维才能可持续地解决问题只有思维才是真正值得学习和分享的核心要素。

如果这篇博客能给您带来一点帮助麻烦您点个赞支持一下还可以收藏起来以备不时之需有疑问和错误欢迎在评论区指出~

其他热门文章请关注

你真的会使用Vue3的onMounted钩子函数吗Vue3中onMounted的用法详解

通过array.filter()实现数组的数据筛选、数据清洗和链式调用

Flow绘制一个完美流程图

el-table实现动态数据的实时排序一篇文章讲清楚elementui的表格排序功能

在线编程实现如何在Java后端通过DockerClient操作Docker生成python环境

JavaScript中闭包详解举例闭包的各种实践场景高级技巧与实用指南

Docker

shpfile转GeoJSON且控制转化精度如何获取GeoJSONGeoJson结构详解