全网多种方式解决Unchecked runtime.lastError: The message port closed before a response was received的错误

news2024/11/20 20:31:48

文章目录

  • 1. 文章引言
  • 2. 分析问题
  • 3. 解决问题
  • 4. 解决该错误的其他方法

1. 文章引言

今天启动项目后访问Knife4j接口文档,却报出下图错误:

在这里插入图片描述

在报出Knife4j文档请求异常错误时,赶紧打开控制台,如下所示:

在这里插入图片描述

Unchecked runtime.lastError: The message port closed before a response was received.

2. 分析问题

正赶上最近ChatGPT很火,于是借助ChatGPT来解决我的问题,如下所示:

在这里插入图片描述

Unchecked runtime.lastError: The message port closed before a response was received.

This error occurs when a message port fails to respond within a specified time frame, which means that the browser was unable to send data or receive a response from the server. This could be caused by an issue with the connection between the browser and the server, an issue with the server, or an issue with the messaging system between the browser and the server.

不巧的是,给出的是英文回复,我们可以将其翻译成中文,如下所示:

当消息端口无法在指定的时间范围内响应时,会发生此错误,这意味着浏览器无法发送数据或接收来自服务器的响应。这可能是由浏览器和服务器之间的连接问题、服务器问题或浏览器和服务器之间的邮件系统问题引起的。

简单理解ChatGPT的回复,即服务端无法在指定时间内,给到客户端的响应。

如果客户端的代码引入某一插件(比如vue,react等),而该插件中某一脚本页在接不到响应时,又使用了chrome.runtime.sendMessage或者tabs.sendMessage并调用了回调函数而接收函数并没调用导致的。

为了验证这个错误,我们使用node.js来写一段简单前后端代码,如下所示。

  1. 前端的简单代码(front-script.js):
//ront-script.js简单代码
chrome.runtime.sendMessage({
    action: "server",
    source: "test Unchecked runtime.lastError",
},function(e){
    alert('ok');
});

上面的函数发送了test Unchecked runtime.lastError消息,并调用了回调函数用来alter(‘ok’)

  1. 后端的简单代码(backend.js):
//backend.js简单代码
chrome.extension.onMessage.addListener(
  function (request, sender, sendResponse) {
	if (request.action === "server") {
		var a= 0;
	}
  } 
);

如果后端只处理逻辑,并不调用回调函数sendResponse(),就会出现这个错误:Unchecked runtime.lastError: The message port closed before a response was received.

3. 解决问题

backend.js中正确的处理方法是:

// backend.js正确的代码
chrome.extension.onMessage.addListener(
  function (request, sender, sendResponse) {
    if (request.action === "server") {
	   var a= 0;
	 //注意就是这个sendResponse函数一定要调用,否则就会报错
	  sendResponse({farewell: "ok"});  
    } 
  }
);

也就是说sendResponse({farewell: "ok"})这一段不调用的话就会报这个错误:Unchecked runtime.lastError: The message port closed before a response was received

但是很多情况下并没有调用,而发送函数自己却使用到了,从而导致这个错误。

如果上述方法无法解决你的问题,可以参考下面的解决方法。

4. 解决该错误的其他方法

如果你在chrome中引入了某一扩展程序,比如vueVideo Speed Master等,有可能会因为插件和程序不兼容导致这个错误:Unchecked runtime.lastError: The message port closed before a response was received

解决方法:只要在chrome://extensions/里面把这个阅读模式关闭就可以,如下图所示:

在这里插入图片描述

在这里插入图片描述

如果还是无法解决你的问题,欢迎在评论区中留言。

如果你的错误不是通过以上方法解决的,也欢迎在评论区中留言。

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

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

相关文章

CSS过渡动画

css中实现动画有两种方式:transition过渡动画、 animation自定义动画。 transition 是 css3 新增的⼀个功能,可以实现元素不同状态间的平滑过渡(当元素从⼀个状态进⼊到另⼀个状态时),经常⽤来制作⼀些动画效果。 之…

前端项目面试核心问题(持续更新)

本文有配套视频教程 项目面核心问题回答思路 说说你最近的项目 记叙文的六要素:时间、人物、地点、起因、经过、结果;时间:研发周期;人物:团队成员、分工、我负责哪几个模块;起因:项目背景、…

Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本(开发导航栏及公共部分)

基于 Vue3.x Vant UI 的多功能记账本(三) 文章目录基于 Vue3.x Vant UI 的多功能记账本(三)项目演示开发导航栏1、底部导航栏2、测试底部导航栏3、公共头部写到最后(附源码)系列内容参考链接基于 Vue3.x …

element-UI组件之日期时间选择器与时间格式转化

element-UI组件之日期时间选择器与时间格式转化日期选择器与时间选择器的一般使用日期时间选择器选择日期时间点选择日期范围日期选择器月份范围选择器禁选日期用time.getTime()进行日期(时间)格式的转换时间选择器el-time-select选择固定时间点el-time-picker选择任意时间点禁…

Vite 基本配置及原理

Vite 基本配置及原理介绍vite.config.jsoptimizeDeps.exclude不同环境的 vite 配置css配置Vite 对 css 的处理Vite 对 cssmodule 的处理和配置Vite 对预处理器的配置devSourcemapVite 对 postcss 的支持Vite 静态资源别名设置Vite 生产环境配置介绍 如果你还不知道 Vite&#…

【Vue入门必备知识篇05】--- Vue Router路由

前言❤️ 当落日余晖照在身上,没有污秽没有杂尘,只有光和希望 ❤️【Vue入门必备知识篇05】--- Vue Router路由一、前端路由的概念与原理(1)什么是路由(2)SPA 与前端路由(3)什么是前…

vue-router中的参数传递

文章目录前言一、本文章中练习需要的准备工作暴力引入bootstrap安装Vue Router二、项目基本架构1. 配置router文件2. 写入路由组件 一级路由3. 二级路由 实现传参3.1 使用params 传参3.1.1 在router文件下配置二级路由3.1.2 在view文件下新建二级路由组件3.1.3 在上一级路由组件…

uniapp**字符串转Json并提取字段值

uniapp字符串转Json并提取字段值 JSON有三种格式,每一种写法都和JS中的数据类型很像,可以很轻松的和JS中的数据类型互相转换 一、简单值的形式:JSON的简单值的格式对应着JS中的基础数据类型:数字 字符串 布尔值 注意事项&#…

这是我见过最牛逼的滑动加载前端框架

文章目录前言一、mescroll简介二、快速开始三、一分钟入门mescroll图片懒加载四、mescroll在vue中的使用五、小结前言 在手机端实现下拉刷新和下拉加载是最常见不过的需求了。今天大师兄就给大家分享一个非常精致的js框架:mescroll. 提示:以下是本篇文…

Cursor:GPT-4 驱动的强大代码编辑器

Cursor (https://www.cursor.so/)是 GPT-4 驱动的一款强大代码编辑器,可以辅助程序员进行日常的编码。下面通过一个实际的例子来展示 Cursor 如何帮助你编程。这个例子做的事情是网页抓取。抓取的目标是百度首页上的百度热搜,如下…

使用Python进行网站页面开发——HTML

目录 一、HTML基础语法 1.HTML是什么? 2.HTML基本结构 3.HTML注释 二、HTML常用标签介绍 1.文本标签 2.格式化标签 3.图片标签 4.超级链接标签 5.表格标签(用来显示数据) 6.表单标签(用来接收数据) 7.行内…

ACM模式下JavaScript(js)的输入输出 V8 Node

OJ在线编程常见输入输出练习场 ACM模式下分V8和node.js node.jsV8内置基本模块,相当于java中的JREJVMjava标准库 node就是带有能操作IO和网络库的V8引擎,提供了很多可调用的API使得JavaScript能够读写文件,网络请求,系统信息等…

【IIS搭建网站】本地电脑做服务器搭建web站点并公网访问「内网穿透」

文章目录1.前言2.Windows网页设置2.1 Windows IIS功能设置2.2 IIS网页访问测试3. Cpolar内网穿透3.1 下载安装Cpolar3.2 Cpolar云端设置3.3 Cpolar本地设置4.公网访问测试5.结语1.前言 在网上各种教程和介绍中,搭建网页都会借助各种软件的帮助,比如网页…

前端项目如何部署到服务器实现网址访问

目录 前言 需要用到的东西 购买云服务器和域名 绑定域名 使用Xshell连接云服务器 下载Nginx 安装nginx 配置nginx 启动nginx 传输文件 配置防火墙 卸载自带的防火墙 安装iptables防火墙 最后 前言 写了那么久的前端,就想着让朋友们欣赏欣赏&#xff0…

ElementUI快速上手(jar包本地下载)

Element-ui是饿了么前端团队推出的基于vue进行开发的前端框架。 最近刚学了Element-ui,迫不及待练练手,却发现现成的组件样式用不了。引用官网的使用方法,如图: 展示的效果也是不尽人意,在百度的过程中发现可能是链接…

相对定位relative、绝对定位absolute、固定定位fixed

注:默认情况下的定位是 postion:static; 使用定位时,常常使用偏移量对位置进行描述:left、right、top、bottom定位时,使用z-indent可以元素的堆叠顺序,例:z-indent:1&…

Spring Security 权限控制

日积月累,水滴石穿 😄 前言 项目版本Boot2.3.12.RELEASESecurity5.3.9.RELEASE 官网文档 在前面的文章中,所有的接口只需要登录就能访问。并没有对每个接口进行权限限制。 在正式的系统中,一个用户会拥有一个或者多个角色&#…

三种架构模式——MVC、MVP、MVVM

目录 前言 一、MVC(Model-View-Controller) 1、简介 2、框架图 二、MVP(Model-View-Presenter) 1、简介 2、框架图 三、MVVM(Model-View-ViewModel) 1、简介 2、框架图 四、总结 前言 MV系列框…

微信小程序插件--wxml-to-canvas(生成图片)

一、需求 项目中要实现一个将图片分享到朋友圈的功能,将生成的海报转成图片保存到手机。用到了wxml-to-canvas插件。 二、官方示例使用方法 1.安装wxml-to-canvas npm install --save wxml-to-canvas2.JSON 组件声明 {"usingComponents": {"wxml-t…

多款顶级好用的 Vue 表单设计器测评推荐,可拖拽生成表单

本文完整版:《多款顶级好用的 Vue 表单设计器测评推荐,可拖拽生成表单》 Vue 表单设计器form-generator - 适配 Element Plus UI 框架的表单设计器form-render - 阿里团队开源表单设计器,自家 Antd UI 框架友好form-create - 支持Vue3 及 Ele…