mapbox没有token/token失效,地图闪烁后变空白,报错Error: A valid Mapbox access token is required to use Mapbox GL JS.

目录

mapbox没有token/token失效,地图闪烁后空白,报错Error: A valid Mapbox access token is required to use Mapbox GL JS.

一、问题描述

二、mapbox去除token验证

1、找到mapbox-gl文件夹

2、找到mapbox-gl.js文件

3、找到对应位置并修改

 4、清除缓存

5、问题解决

三、高阶部分:为什么这样解决问题?

四、总结


作者: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://account.mapbox.com/

错误:使用Mapbox GL JS需要有效的Mapbox访问令牌。要创建帐户或新的访问令牌,请访问https://account.mapbox.com/

        这个错误是说你的mapbox验证令牌(token)失效了,需要到官网(https://account.mapbox.com/)重新申请一个。但是申请非常不方便。本文将介绍一种符合程序员优雅美学的暴力破解方法,非常简单。

二、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://account.mapbox.com/"

        到这里看懂了之后,修改就很简单了,直接将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://docs.mapbox.com/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://account.mapbox.com/”。再结合具体的报错信息,就能定位问题所在。

四、总结

        本博客介绍了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环境

        干货含源码!如何用Java后端操作Docker(命令行篇)

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

        PDF预览:利用vue3-pdf-app实现前端PDF在线展示

        巧用Array.forEach:简化循环与增强代码可读性

        Docker 入门全攻略:安装、操作与常用命令指南

        MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/57172.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uploads-labs靶场刷题记录

Pass-01 尝试上传一句话木马 1.php: <?php eval($_POST[cmd]);?>发现设置了白名单且抓包没有记录&#xff0c;说明在前端进行的拦截&#xff08;可以禁用前端的JS从而绕过拦截&#xff0c;达到直接上传木马的目的&#xff09;。 将一句话木马文件加上.jpg后缀1.php.jp…

nodejs 实现docker 精简可视化控制

地址 https://github.com/xiaobaidadada/filecat 说明 使用react 和nodejs 实现的非常轻量的服务docker管理。

ArchLinux VSCode 1.94.2无法安装or更新解决办法

此方法参考了这篇博客https://www.debugpoint.com/failed-connect-raw-githubusercontent-com-port-443/#google_vignette 某一次paru后&#xff0c;一直报错503什么的&#xff0c;在archlinux官网看到pacman安装的是个Open VSX版本的&#xff0c;是Arch官方的版本&#xff0c;…

Centos7搭建minio对象存储服务器

Centos7搭建minio对象存储服务器 安装二进制程序配置服务文件 安装二进制程序 参考&#xff1a;https://segmentfault.com/q/1010000042181876 minio中国版&#xff1a;https://www.minio.org.cn/download.shtml#/linux # 下载二进制程序 wget https://dl.min.io/server/min…

从MySQL到OceanBase离线数据迁移的实践

本文作者&#xff1a;玉璁&#xff0c;OceanBase 生态产品技术专家。工作十余年&#xff0c;一直在基础架构与中间件领域从事研发工作。现负责OceanBase离线导数产品工具的研发工作&#xff0c;致力于为 OceanBase 建设一套完善的生态工具体系。 背景介绍 在互联网与云数据库技…

R实验——logistic回归、LDA、QDAKNN

数据集介绍&#xff1a; mpg&#xff0c;miles per gallon即油耗&#xff0c;这个数据集来自卡内基梅隆大学维护的StatLib库。1983年美国统计协会博览会使用了该数据集。这个数据集是对StatLib库中提供的数据集稍加修改的版本。根据Ross Quinlan(1993)在预测属性“mpg”中的使…

【Linux报错】为什么“userdel 某用户”,这个用户还存在于家目录中?

你删除一个用户&#xff0c;却在 /home/ 家目录下还看到该用户家目录文件&#xff0c;是因为&#xff1a; 使用 userdel 命令来删除一个用户&#xff1a;默认情况下&#xff0c;该用户的主目录&#xff08;通常位于/home/username&#xff09;不会被自动删除。这是因为userdel有…

超硬核!大模型算法岗面试必问100题,我说的,不信就来看看

大模型算法岗常见面试题100道 *一、基础篇* 1、目前主流的开源模型体系有哪些&#xff1f; Transformer体系&#xff1a;由Google提出的Transformer 模型及其变体&#xff0c;如BERT、GPT 等。PyTorch Lightning&#xff1a;一个基于PyTorch的轻量级深度学习框架&#xff0c;…

如何将 Docker 镜像的 tar 文件迁移到另一台服务器并运行容器

实验室项目共建人&#xff1a;周凌飞、武正乔、杨霄汉 特别鸣谢&#xff1a;bilibili 博主 老韩一米九、一堂 杨国帅 提供设备部署以及上线指导 本博客部分内容由kimi生成&#xff0c;鸣谢&#xff1a;吴润生 迭代生成式AI提示词思考模型 在 Docker 容器化的世界里&#xf…

开源限流组件分析(三):golang-time/rate

文章目录 本系列前言提供获取令牌的API数据结构基础方法tokensFromDurationdurationFromTokensadvance 获取令牌方法reverseN其他系列API 令人费解的CancelAt是bug吗 取消后无法唤醒其他请求 本系列 开源限流组件分析&#xff08;一&#xff09;&#xff1a;juju/ratelimit开源…

Java之继承抽象类用法实例(三十一)

简介&#xff1a; CSDN博客专家、《Android系统多媒体进阶实战》一书作者 新书发布&#xff1a;《Android系统多媒体进阶实战》&#x1f680; 优质专栏&#xff1a; Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a; 多媒体系统工程师系列【…

git命令笔记(速查速查)

git命令功能总结 1.创建git的本地仓库2. 配置本地仓库(name和email地址)3. 工作区、版本库、暂存区、对象区3.1 add, commit3.2 打印提交日志3.2 修改文件 4.版本回退&#xff08;git reset&#xff09;5. 撤销修改&#xff08;在push之前撤销&#xff09;6.删除版本库中的文件…

SSM框架学习(七、MyBatis-Plus高级用法:最优化持久层开发)

目录 一、MyBatis-Plus快速入门 1.简介 2.快速入门 二、MyBatis-Plus核心功能 1.基于Mapper接口CRUD &#xff08;1&#xff09;Insert 方法 &#xff08;2&#xff09;Delete方法 &#xff08;3&#xff09;Update 方法 &#xff08;4&#xff09;Select方法 2.基于Serv…

Chrome DevTools 三: Performance 性能面板扩展—— 性能优化

Performance 性能 &#xff08;一&#xff09;性能指标 首次内容绘制 (First Contentful Paint&#xff0c;FCP)&#xff1a; 任意内容在页面上完成渲染的时间 最大内容绘制 (Largest Contentful Paint&#xff0c;LCP)&#xff1a; 最大内容在页面上完成渲染的时间 第一字节…

283.移动零

目录 题目解法解释&#xff1a; .reverse()怎么用的&#xff1f;Char 13: error: no matching function for call to reverse 什么是双指针&#xff1f;双指针的常见类型&#xff1a;总结&#xff1a; 题目 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末…

88.【C语言】文件操作(5)

目录 文件的随机读写 1.fseek函数 代码示例 运行结果 2.ftell函数 代码示例 运行结果 3.rewind函数 代码示例 运行结果 承接79.【C语言】文件操作(4)文章 文件的随机读写 1.fseek函数 声明:int fseek ( FILE * stream, long int offset, int origin ); 格式:fsee…

APM 3.0.0|二次元味很冲的B站音乐软件

APM是一款专为B站音频设计的第三方播放器&#xff0c;支持从B站获取音频内容&#xff0c;提供桌面小组件&#xff0c;多语言支持&#xff0c;以及针对Android系统的优化。下载安装APK后打开应用&#xff0c;登录B站账号&#xff0c;浏览并播放音频内容。 大小&#xff1a;73M …

13分+文章利用scRNA-Seq揭示地铁细颗粒物引起肺部炎症的分子机制

写在前面 人们乘坐地铁时&#xff0c;不可避免地在地铁站台上吸入细颗粒物&#xff08;PM2.5&#xff09;&#xff0c;但PM2.5对人体又有哪些危害呢&#xff0c;今天和大家分享一篇文章&#xff0c;题目为“单细胞转录组学揭示吸入地铁细颗粒物引起的肺部炎症”&#xff0c;作…

《AI生成式工具使用》之:AI文本生视频(二战!)

目录 背景说明及目标 尝试练手 1、豆包AI之图片生成 总结&#xff1a;豆包AI生成的图片&#xff0c;不太能看细节&#xff0c;涉及到中文的基本上不能细看都是类似乱码的东西&#xff0c;有明显的逻辑性问题&#xff08;比如不符合道路交规&#xff09;。需要根据生成的结果…

Java-继承与多态-上篇

关于类与对象&#xff0c;内容较多&#xff0c;我们分为两篇进行讲解&#xff1a; &#x1f4da; Java-继承与多态-上篇&#xff1a;———— <就是本篇> &#x1f4d5; 继承的概念与使用 &#x1f4d5; 父类成员访问 &#x1f4d5; super关键字 &#x1f4d5; supe…