开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Webpack通过调用sockjs-node/net：：ERR_SSL_PROTOCOL_ERROR记录错误"net::ERR_SSL_PROTOCOL_ERROR“

Webpack是一个现代化的JavaScript模块打包工具，它在前端开发中扮演着非常重要的角色。它的主要功能是将多个 JavaScript 文件打包成一个或多个 bundle 文件，以及处理资源文件（如样式表、图片等），以优化网页加载速度。

在Webpack中，调用sockjs-node/net时出现"net::ERR_SSL_PROTOCOL_ERROR"错误通常是由于网络通信过程中出现了SSL协议错误引起的。SSL（Secure Sockets Layer）是一种用于在Internet上保护数据传输安全的加密协议。ERR_SSL_PROTOCOL_ERROR表示在建立SSL连接时发生了协议错误，可能是由于证书问题、加密套件不匹配或安全设置问题等导致的。

对于这个错误，你可以尝试以下几个解决方法：

确认目标服务器是否支持SSL协议：首先确保目标服务器正常运行，并且支持SSL协议。可以联系服务器管理员或查看服务器文档以获取更多信息。
检查证书是否有效：如果你是通过HTTPS进行通信，检查服务器证书是否有效。可以使用在线工具或浏览器内置的安全工具来验证证书的有效性。
检查加密套件设置：确认服务器与客户端之间的加密套件设置是否匹配。可以调整Webpack配置文件或服务器配置文件，以确保双方使用相同的加密套件。
检查防火墙或安全设置：有时防火墙或安全设置可能会导致SSL协议错误。确保防火墙或安全软件没有阻止与目标服务器的连接。
更新相关依赖：确保你使用的Webpack版本、sockjs-node版本和net库版本等都是最新的。有时升级或更新这些依赖项可以修复一些已知的SSL协议错误问题。

推荐的腾讯云相关产品和产品介绍链接地址：

SSL证书服务：腾讯云的SSL证书服务可以为网站提供可靠的加密通信保护，有效防止网络攻击和信息泄露。了解更多请访问：https://cloud.tencent.com/product/ssl-certificates
腾讯云CDN：腾讯云CDN（Content Delivery Network）提供全球加速、安全可靠的内容分发服务，可以有效提升网站的访问速度和稳定性。了解更多请访问：https://cloud.tencent.com/product/cdn
腾讯云安全组：腾讯云安全组是一种虚拟防火墙，可以为云服务器提供网络访问控制和安全防护，保障云服务器的网络安全。了解更多请访问：https://cloud.tencent.com/product/cfw

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

vuecle3项目运行报错sockjs-nodeinfo解决方案

t=1462183700002 net::ERR_CONNECTION_REFUSED [WDS] Disconnected!...t=1462183700002 net::ERR_CONNECTION_REFUSED [WDS] Disconnected!...t=1462183700002 net::ERR_CONNECTION_REFUSED [WDS] Disconnected!...... webpack.config.js的目前配置如下： const path = require('path'); const resolve = dir => path.resolve(__dirname...sockjs/sockjs-client） vue-cli3.x的启动方式是 npm run serve，我们没有用到该sockjs-node功能，但启动时会默认连续发请求调用本地接口。

20.9K5 0

【可观测链路】多语言 Opentelemetry SDK 接入实践

一、背景随着时间推移，笔者参与的平台建设已进入稳定的开发迭代版本，目前平台的各模块需要一个通用的、可扩展的问题定位、日志上报、跟踪调用链路的模块为了契合可观测性标准，梳理内部调用链路，增强线上故障定位能力...进一步监测内部调用及上下游调用时的时延、链路关系、报错信息，便于定位线上问题二、Opentelemetry 简介程序本身会具备一定的行为，在开发环境中如果想监测这些行为一般会通过下断点、打印日志来进行...Opentelemetry 提供三种主要的数据类——Traces、Logs、Metrics，这三者称为 "可观测性的三大支柱"：Logs : 指在特定时间发生的行为的文本记录，一般分为纯文本、结构化、非结构化三类...Opentelemetry 社区提供的 instrumentation 包，关键代码如下所示，通过封装 net/http 库的 client.Do 方法，向 http.Request 中注入 trace...：1）上报到远程服务失败前端执行上报流程时报网络错误：net::ERR_CONNECTION_RESET排查后发现因前端 JS 代码在本地执行，和远端上报地址不通。

1.3K4 2

记录一次迁移wss WebSocket的事故

因此本文，就是用来记录这些踩过的“坑”，希望可以让后人少走点弯路。 1. 申领证书公有云服务器上，一般大家都习惯使用Nginx来做反向代理。...事故现场完成以上步骤后，按道理来说，h5游戏确实可以通过https的形式来打开了，简单测试后的确没啥问题，然后大家也就这样愉快的下班了。...浏览器控制面板异常信息 WebSocket connection to ‘wss://{ip}:{port}/‘ failed: Error in connection establishment: net...::ERR_SSL_PROTOCOL_ERROR 之前在Http的情况下，客户端一直是用ip+port的形式来连接服务端，当然了也不会出现什么问题。...所以仅以此文，记录下我的填“坑”过程。

4.3K1 0

NodeJS日志记录（Electron项目）

结合的时候，建议日志在main.js中引用,页面中通过ipc方式进行调用。...'); electron-log supports the following log levels: error, warn, info, verbose, debug, silly 以上代码通过不同级别记录日志...为了弥补这方面的不足，Electron提供了netLog模块，允许开发人员通过编程的方式记录网络请求。...remote来使用他，它的startLogging接收两个参数，第一个参数是日志文件记录的路径，也可以通过app.getPath('userData')来指定路径，第二个参数是一个配置对象，具体参考文档...另外这种方法生成的错误日志也没法通过文本文档查看，所以我就没有使用。

2.9K2 0

ASP.NET Core Startup类 Configure()方法 | ASP.NET Core 中间件详细说明

当应用启动时，运行时调用 ConfigureServices 和 Configure 。...Core 请求管道包含一系列请求委托，依次调用。...Core 内置很多中间件，用户可以直接使用，将在文章后面介绍 ---- 4,使用中间件默认创建 Asp.Net Core Mvc 程序时，会生成如下模板(Asp.Net Core 2.1) 在文章后面或详细列出所有中间件并加以说明...、处理错误等。...UseDirectoryBrowser(IApplicationBuilder) 在当前路径上启用目录浏览笔者注：对于非程序运行目录或特殊目录，用户通过浏览器打开该目录时，会列出目录内容。

3.6K2 0

Vue-Cli学习笔记，持续记录

Vue-cli学习记录 1.模式和环境变量修改.Env环境变量文件之后，需要重新运行server才会生效。环境变量通过process.ENV访问。...（https://blog.csdn.net/weixin_39788999/article/details/105022415） npm list vue 查看vue-cli的版本号，通过命令行 vue...5.sass各种包的说明 sass 是由 ts调用 dart-sass实现的工具类，来编译 sass（以前是由单纯的 ts实现的） dart-sass 是由 dart 实现的,通过 dart vm 运行...dart 是编译 sass（在 npm 可以看到该包已不被开放下载了） node-sass 是由 node 调用底层 c++ 实现的 libsass 来编译 sass 相关文章：https://www.cnblogs.com...（webpack） 2.configureWebpack 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。如果这个值是一个函数，则会接收被解析的配置作为参数。

1.5K2 0

微前端架构实战

1-3 微前端落地方案自组织模式：通过约定进行互调，但会遇到处理第三方依赖等问题。基座模式：通过搭建基座、配置中心来管理子应用。...案例：通过 webpack 将 react 应用打包为 systemjs 模块，在通过 systemjs 在浏览器中加载模块 npm install webpack@5.17.0 webpack-cli...// 在调用 start 之前, 应用会被加载, 但不会初始化, 挂载或卸载. start({ // 是否可以通过 history.pushState() 和 history.replaceState...-- 用于覆盖通过 import-map 设置的 JavaScript 模块下载地址 --> <script src="https://cdn.jsdelivr.<em>net</em>/npm/import-map-overrides... const lifecycles = singleSpaReact({ React, ReactDOM, // 渲染根组件 rootComponent: Root, // <em>错误</em>边界函数

3.9K0 0

前端性能优化总结

通过对webpack进行配置，打包时自动去掉console.log //npm i -D terser-webpack-plugin configureWebpack:config =>{ const...{compress:{drop_console:true}} //插件配置项移除console }) ) } 去除SourceMap 代码压缩后进行调bug定位将非常困难，于是引入sourcemap记录压缩前后的位置信息记录...，当产生错误时直接定位到未压缩前的位置，将大大的方便我们调试。...所以可以通过将资源部署在CDN上来提高响应速度，提高用户体验预渲染简单来说，就是将浏览器解析JavaScript动态渲染的工作，在打包阶段完成了（只构建了静态数据）。...换个说法，在构建过程中，webpack通过使用prerender-spa-plugin插件生成静态结构的html 更多内容请见原文，文章转载自：https://blog.csdn.net/weixin

3323 0

让 WebStorm 自动识别 Webpack 的 alias 配置

定位为了定位问题，我先创建一个最基础的 Webpack 项目，然后通过 WebStorm 打开，发现 alias 里的路径全都能正常解析。...只不过对于解析失败的情况，给出的错误信息非常模糊，只说是一个 default 关键字不存在的异常。...倒是根据启动时设定的环境变量，在入口 webpack.config.js 内通过 switch 引入了不同的任务配置（development/production），而这个 switch 里没有编写 default...补充了 default 的情况后，WebStorm 的输出窗口里不再提示 default 异常，但还是提示了另一个错误。...不过从错误信息的变化看来，WebStorm 对于 Webpack 配置文件的解析不像是静态解析，更可能是后台执行了一遍 webpack.confi.js，然后取了返回结果。

2.1K2 0

npm常用命令

devDependencies对象里面 npm i xxx --save 是把依赖写入进dependencies对象里面 npm i xxx -g 就是安装到全局下，在命令行的任何地方都可以操作，不会提示“命令不存在等错误...” npm i xxxx 就是安装到当前命令行下的目录中，但不会记录在package.json中，npm install时不会自动安装此依赖作用 devDependencies 是开发环境下的依赖...，这里是开发环境下的依赖，上线后非必需，比如：webpack，gulp等压缩打包工具。... --save-dev npm-check检查更新 ① 安装npm-check npm install npm-check -g ② 检查npm包的状态 npm-check -u -g 通过上下键可以移动光标...npm install -g npx 调用项目安装的模块 npx 想要解决的主要问题，就是调用项目内部安装的模块。比如，项目内部安装了测试工具Mocha。

3235 0

收集

教程（mac系统）： http://www.jianshu.com/p/5ba253651c3b 博客（连载）： http://blog.csdn.net/fungleo/article/details.../77584701 （这个很全） vue+webpack（入坑之旅）： http://blog.guowenfh.com/2016/03/24/vue-webpack-01-base/ vue脱坑： http...://blog.csdn.net/ivan820819/article/details/78637550?.../article/127406.htm https://segmentfault.com/a/1190000007484936 vue导航守卫（拦截页面，记录滚动位置）： https://router.vuejs.org...normalize.css 格式化css nprogress 轻量的全局进度条控制 vuex 官方状态管理 vue-router 官方路由注：vuedemo中，每个页面实现不同的效果 1> 、index.vue页面是调用接口显示数据

1.1K5 0

微前端——single-Spa

> // 项目打包后，生成index.js，打包配置中将react和react-dom提取出来了 // 依赖前置，引入index.js时 // index.js里面会注册通过...，主要引入system.js，并在importmap中配置好公共模块地址和子应用地址，做到按需导入，通过System.import('')引入基座。...配置文件，这个文件主要导入了 "webpack-config-single-spa"，一个可共享的、可定制的 webpack 配置，是已经帮忙做好的关于single-spa的webpack 文件。...ReactDOMbject rootComponent: Root, // 将被渲染的顶层React组件 errorBoundary(err, info, props) { // 错误边界...调用setPublicPath设置公共路径。

3.7K2 0

两年经验前端带你重学前端框架必会的ajax+node.js+webpack+git等技术 Day1

黑马程序员前端AJAX入门到实战全套教程，包含学前端框架必会的（ajax+node.js+webpack+git），一套全覆盖 Day1 你好,我是Qiuner....为帮助别人少走弯路和记录自己编程学习过程而写博客这是我的 github https://github.com/Qiuner ⭐️ gitee https://gitee.com/Qiuner...二为查缺补漏本文档是黑马程序员公开学习视频的学习笔记，记录了bug、作业等。...代码看着没问题但显示TypeError: Cannot read properties of undefined (reading ‘protocol’) 这种情况，是你使用错误，比如data写成date...在本例中，就是将url写成URL了 axios错误处理注意，result、error都是箭头函数，因此，result不能在error括号中使用 HTTP HTTP请求协议通过请求报文查错发现发送的数据是有问题的

861 0

webpack之编译原理

/src/index.js，它会通过这个路径检查当前这个模块是否已经加载过，注意哦：它不是运行模块，而是瞅一眼，看看模块记录表（上图右边蓝色表格）中该模块是不是被加载过，首次检查表格是没有内容的，空的。.../b"); AST在线测试工具：https://astexplorer.net/ 第5步：将分析出来的依赖记录到dependencies数组中 //记录依赖 ["./src/a.js","....以上就是webpack编译过程，做这一切最终的目的就是形成一个模块记录表。下面有个简图，经过上述编译过程之后会在chunk中通过入口文件加载形成多个模块，每个模块记录了转换之后的代码。...「总过程」当敲下webpack打包命令之后，文件开始初始化，各个参数进行融合，形成一个最终的配置对象，然后把配置对象交给编译器进行编译，通过入口模块找到互相依赖模块形成模块列表，接下来webpack...编译原理阅读有任何错误的地方，欢迎大家给我提意见，一定虚心听取你们的指正，若觉得不错的，也可以点个「star」支持一下我。

5721 0

Vue2+VueRouter2+webpack 构建项目实战（三）配置路由，整俩页面先

+webpack 构建项目实战（五）配置子路由》制作模板文件通过前面的两篇博文的学习，我们已经建立好了一个项目。...不过本章节不涉及调用接口等内容。这里，我们假设我们的项目是做俩页面，一个列表页面，一个内容页面。列表页面有分页等，内容页面展示。因此，我们需要两个模板文件。..._listen2 (net.js:1253:14) ...... 打开项目根目录下/config/index.js配置文件，找到 dev: { env: require('....通过本章学习，我们需要掌握如下技能：简单配置main.js文件。简单安装组件，以及相应的配置。遇到错误提示的时候，不要着急，一步一步排查，最终解决问题。...首发地址：http://blog.csdn.net/fungleo/article/details/53199436

5273 0

Vue基础：响应式

webpack构建Vue项目使用webpack构建Vue项目，在配置文件中会看到如下代码： module.exports = { // ......可以通过控制该环境变量，对Vue进行压缩，以减少最终文件的大小。 var webpack = require('webpack') module.exports = { // ......这也是为什么上述需要通过别名指定加载Vue的完整版本！...每个组件实例都有相应的watcher实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。...$nextTick()，这样回调函数在DOM更新完成后就会调用。 ?

1.1K3 1

【nodejs】解决跨域问题

---- 跨域问题跨域：浏览器同源策略引起的接口调用问题同源策略：主机端口协议接口调用： XMLHttpRequest 和 Fetch 都遵循同源策略浏览器：浏览器发现可疑行为，拒绝接收...当我们通过 3000 端口去访问 http://localhost:4000/ 的时候，就会产生跨域错误。...通过这里也能看出来是一个跨域错误（CORS error）解决跨域问题响应简单请求响应简单请求: 动词为 get / post / head 没有自定义请求头 Content-Type 是 application...devserver vue.config.js 中配置的请求代理实际上是 webpack devserver 。...// 用于TCP通讯 const net = require("net") // 创建服务 const chatServer = net.createServer() // 用户列表 const clientList

1.7K3 0

Webpack前端技术类文章

优势：支持commonJS和AMD模块支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码可以通过配置打包成多个文件，...部分依赖与webpack的插件会调用项目中webpack的内部模块，这种情况下仍然需要在项目本地安装webpack，而如果全局和本地都有，容易造成混淆。...就是未被调用到的模块代码就是不会被执行的，成了死代码，通过静态分析可以在打包时去掉这些未曾用过的模块，来减少打包资源体积。...例如，在前面的例子中，输出的脚本路径是dist/example4.1.js，而在生产环境中访问的时候却有可能是http://cdn.toobug.net/scripts/webpack_guide/dist...这种情况下，就需要使用output.publicPath来将前面的路径补全： output:{ publicPath:'http://cdn.toobug.net/scripts/webpack_guide

1.6K3 0

移动 Web 最佳实践（干货长文，建议收藏）

webview 加载网页，而当网页要获取设备能力（例如调用摄像头、本地日历等）或者 native 需要调用网页里的方法，就需要通过 JSBridge 进行通信。...e.printStackTrace(); handler.complete(6005); } } } h5 端同步日历核心代码（通过装饰器来限制调用接口的平台...一般弹出组件是不会在路由栈上添加任何记录，因此我们在弹出组件时，可以在路由栈中 push 一个记录，为了不让页面跳转，我们可以把跳转的目标路由设置为当前页面路由，并加上一个 query 来标记这个组件弹出的状态...，window.onerror 捕获的信息更丰富，包括了错误字符串信息、发生错误的 js 文件，错误所在的行数、列数、和 Error 对象（其中还会有调用堆栈信息等）。...，该插件可以在 babel[82] 编译 js 的过程中，通过在 ast 中查找 catch 节点，然后再 catch 代码块中自动插入错误上报函数，可以自定义函数名，和上报的内容（源码所在文件，行数，

2.5K1 0

一款开源的跨平台实时web应用框架——DotNetify

此体系结构允许大多数应用程序逻辑位于服务器端，通过.NET视图模型调用响应模型使数据进出视图。这种数据绑定机制是内置的，不必按照开发人员使用服务和WebAPI的方式编写。...它有一种机制，可以将客户端Javascript或类型记录合并到处理UI逻辑的方式，从而使代码更像是视图模型的自然扩展，并允许您完全控制何时将数据发送回服务器。...内置实时框架应用程序通过非常强大的SignalR技术进行通信，该技术允许服务器立即将内容推送给可用客户端。SignalR使用WebSocket，它的开销比HTTP小得多。...跨平台.NET 在ASP.NET Core、ASP.NET 上运行。利用.NET平台提供的强大语言和工具支持。...Webpack热模块替换+DotNet监视器. OpenID连接/OAuth2认证服务器项目官网：https://dotnetify.net/ ，官网上提供了非常详细的文档。

1.8K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭