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靶场刷题记录

uploads-labs靶场刷题记录

Pass-01 尝试上传一句话木马 1.php: <?php eval($_POST[cmd]);?>发现设置了白名单且抓包没有记录&#xff0c;说明在前端进行的拦截&#xff08;可以禁用前端的JS从而绕过拦截&#xff0c;达到直接上传木马的目的&#xff09;。 将一句话木马文件加上.jpg后缀1.php.jp…
阅读更多...
【京准电钟】“安全卫士”：卫星时空安全隔离防护装置

【京准电钟】“安全卫士”：卫星时空安全隔离防护装置

【京准电钟】“安全卫士”&#xff1a;卫星时空安全隔离防护装置 【京准电钟】“安全卫士”&#xff1a;卫星时空安全隔离防护装置 当前&#xff0c;我国电力系统普遍采用北斗卫星或者GPS卫星授时来实现时间同步&#xff0c;但不加防护的授时装置存在卫星信号被干扰或欺骗的风险…
阅读更多...
nodejs 实现docker 精简可视化控制

nodejs 实现docker 精简可视化控制

地址 https://github.com/xiaobaidadada/filecat 说明 使用react 和nodejs 实现的非常轻量的服务docker管理。
阅读更多...
Python`__init__()`详解

Python`__init__()`详解

在Python编程语言中&#xff0c;__init__() 方法是一个特殊的方法&#xff0c;它是一个类的构造器。每当创建类的新实例时&#xff0c;Python都会自动调用它。__init__() 方法的主要目的是初始化新创建对象的状态。 以下是对 __init__() 方法的几点解释&#xff1a; 初始化方法…
阅读更多...
iOS 大数相加

iOS 大数相加

大数相加的技术点在于进位(两数相加大于10之后进位) 思路如下: 1.从右往左便利,依次去除两个数M和N的个位数、十位数、百位数~~~相加 2.如果M遍历完了,N还没完,那么M用0作为位数上的加数: 代码如下: - (void)bigNumAdd:(NSMutableArray *)arrayA ArrayB:(NSMutableArray *…
阅读更多...
创建工具类之获取SqlSession

创建工具类之获取SqlSession

我们在编写后端程序时&#xff0c;每次想运行一个SQL语句&#xff0c;就需要创建一个SqlSession&#xff0c;因此我们可以封装一个方法&#xff0c;来简化我们的操作。 一般我们需要先在src/main/java下建立一个utils包&#xff0c;专门用来存放各种方法。后期我们还需要其他的…
阅读更多...
ArchLinux VSCode 1.94.2无法安装or更新解决办法

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;…
阅读更多...
Postman中的form-data 和 JSON 的区别

Postman中的form-data 和 JSON 的区别

在使用 Postman 进行 API 测试时&#xff0c;form-data 和 JSON 是两种常用的请求体格式&#xff0c;它们有以下几个主要区别&#xff1a; 1. 数据格式 form-data: 主要用于表单数据的提交&#xff0c;适合文件上传和键值对的数据传递。数据以键值对的形式编码&#xff0c;类似…
阅读更多...
【Vue3】将 Element Plus 引入 Vue3 项目

【Vue3】将 Element Plus 引入 Vue3 项目

前言 在 Vue3 项目中使用 Element Plus 可以为项目提供丰富的 UI 组件和交互体验。下面将介绍如何将 Element Plus 引入 Vue3 项目中。 步骤 安装 Element Plus 首先需要通过 npm、yarn 或 pnpm 安装 Element Plus 包。可以选择其中一种方式进行安装。 # NPM $ npm install…
阅读更多...
Centos7搭建minio对象存储服务器

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…
阅读更多...
机器人学 目录

机器人学 目录

目录 【机器人学】1-1.六自由度机器人运动学正解 【附MATLAB代码】 【机器人学】1-2. MATLAB机器人工具箱的安装与问题处理 【机器人学】1-3.六自由度机器人工作空间 【附MATLAB代码】 【机器人学】2-1.六自由度机器人运动学逆解【附MATLAB机器人逆解代码】 【机器人学】3…
阅读更多...
从MySQL到OceanBase离线数据迁移的实践

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

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

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

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

vuex模块化使用

正常使用&#xff1a; // src/store/index.jsimport Vue from vue; import Vuex from vuex;Vue.use(Vuex);export default new Vuex.Store({state: {count: 0, // 一个简单的状态示例},mutations: {increment(state) {state.count;},decrement(state) {state.count--;},},acti…
阅读更多...
【Linux报错】为什么“userdel 某用户”，这个用户还存在于家目录中？

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

你删除一个用户&#xff0c;却在 /home/ 家目录下还看到该用户家目录文件&#xff0c;是因为&#xff1a; 使用 userdel 命令来删除一个用户&#xff1a;默认情况下&#xff0c;该用户的主目录&#xff08;通常位于/home/username&#xff09;不会被自动删除。这是因为userdel有…
阅读更多...
超硬核！大模型算法岗面试必问100题，我说的，不信就来看看

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

大模型算法岗常见面试题100道 *一、基础篇* 1、目前主流的开源模型体系有哪些&#xff1f; Transformer体系&#xff1a;由Google提出的Transformer 模型及其变体&#xff0c;如BERT、GPT 等。PyTorch Lightning&#xff1a;一个基于PyTorch的轻量级深度学习框架&#xff0c;…
阅读更多...
如何将 Docker 镜像的 tar 文件迁移到另一台服务器并运行容器

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

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

弱口令与命令爆破+DVWA靶场+docker+ARL+Fofa+weakpass

关于弱口令与命令爆破、DVWA靶场、Docker、ARL、Fofa和weakpass&#xff0c;以下是一些关键信息&#xff1a; 弱口令与命令爆破&#xff1a;弱口令指的是容易被攻击者猜测或被破解工具破解的口令。例如&#xff0c;使用单字、家族名称、太短的密码或可预测的模式&#xff08;如…
阅读更多...
某科技——北京——国护蓝中研判岗

某科技——北京——国护蓝中研判岗

文章目录 所面试的公司&#xff1a;某科技所在城市&#xff1a;北京面试职位&#xff1a;国护蓝中研判岗面试过程&#xff1a; 面试官的问题&#xff1a;1、面试官先就是很常态化的让我做了一个自我介绍2、自我介绍不错&#xff0c;听你讲熟悉TOP10漏洞&#xff0c;可以讲下自己…
阅读更多...
开源限流组件分析（三）：golang-time/rate

开源限流组件分析（三）：golang-time/rate

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

Copyright @ 2022~2023