开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

异机访问webpack DevServer子URL时的ERR_SSL_PROTOCOL_ERROR

ERR_SSL_PROTOCOL_ERROR是指在使用HTTPS协议进行通信时，客户端与服务器之间的SSL/TLS握手过程中发生了错误，导致无法建立安全连接。

异机访问webpack DevServer子URL时的ERR_SSL_PROTOCOL_ERROR可能是由以下原因引起的：

证书问题：服务器使用的SSL证书可能无效、过期或不受信任。客户端会验证服务器的证书是否有效，如果验证失败就会报错。
SSL/TLS版本不匹配：客户端和服务器之间的SSL/TLS版本不兼容，导致无法建立安全连接。可以尝试调整客户端和服务器的SSL/TLS版本配置。
加密套件问题：客户端和服务器之间的加密套件不匹配，无法达成共识。可以尝试调整客户端和服务器的加密套件配置。
中间人攻击：可能存在中间人攻击，即有第三方窃听或篡改了通信内容。可以通过使用可信任的证书和加密套件来减少中间人攻击的风险。

为解决异机访问webpack DevServer子URL时的ERR_SSL_PROTOCOL_ERROR，可以采取以下措施：

检查SSL证书：确保服务器使用的SSL证书有效、未过期，并且由受信任的证书颁发机构签发。可以使用腾讯云SSL证书服务获取可信任的SSL证书。
更新SSL/TLS版本配置：在webpack DevServer的配置中，确保使用的SSL/TLS版本与客户端兼容。可以参考腾讯云SSL证书服务文档中的SSL/TLS版本配置指南。
调整加密套件配置：在webpack DevServer的配置中，使用与客户端兼容的加密套件。可以参考腾讯云SSL证书服务文档中的加密套件配置指南。
增强安全性：采取额外的安全措施，如使用HTTP严格传输安全（HSTS）来强制客户端只能通过HTTPS访问，使用公钥固定（HPKP）来验证服务器的公钥等。

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

腾讯云SSL证书服务：https://cloud.tencent.com/product/ssl
腾讯云Web应用防火墙（WAF）：https://cloud.tencent.com/product/waf
腾讯云安全加速（CDN）：https://cloud.tencent.com/product/cdn

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

有帮助

没帮助

相关·内容

vue+webpack 你可能遇到的几种proxy或agent使用代理问题

这了总结一下用vue+webpack开发中可能遇到的各种proxy问题。希望能帮助到各位有需要的人。首先环境分为两个大类：你的开发机已经处于外网环境。...你的开发机处于公司内网（behind a corporate proxy），浏览器通过代理来上外网。其次，两种地方使用代理： webpack devServer 使用代理。...现在，在你用webpack devServer开始的时候，你有一个 api，比如： var data_api = '/api/getdata.php'; // 这个api需要对应到下面这个外网...如果你用axios时，不想借助devServer proxy转发，想直接用外部的http地址，比如： var data_api = 'http://a.b.c/getdata.php'; //我想直接用...但是，如果data_api 的 url 是 https 的，抱歉，上面还是不行。解决办法：用 axios-https-proxy-fix 这个axios。

4.6K2 0

webpack基本配置详解_vue基础知识

注意：只用在通过 devServer 去启动 webpack 时，配置文件里 devServer 才会生效，因为这些参数所对应的功能都是 devServer 提供的，webpack 本身并不认识 devServer...它同样用于搭配 –host 0.0.0.0 使用，因为你想要其它设备访问你本地的服务，但访问时是直接通过 IP 地址访问而不是 HOST 访问，所以需要关闭 HOST 检查。...URL 的网页。...API 请求时，代理某些 URL 可能会很有用。..., }, }, }, 更多 webpack 的信息，请查看：webpack 官网。

7633 0

深入浅出webpack学习2--配置DevServer

注意只有在通过DevServer去启动webpack时配置文件里devServer才会生效，因为这些参数所对应的功能都是DevServer提供的，webpack本身并不认识devServer配置项。...JavaScript代码会从URL里解析出当前的状态，显示对应的界面。...暴露webpack构建出的结果，由于构建出的结果交给DevServer，所以你在使用DevServer时在本地找不到构建出的文件。...它通常用于搭配 --host 0.0.0.0 使用，因为你想要其它设备访问你本地的服务，但访问时是直接通过 IP 地址访问而不是 HOST 访问，所以需要关闭 HOST 检查。...同时还提供 devServer.openPage 配置项用于打开指定 URL 的网页。

1.1K3 0

深入浅出webpack学习1--使用DevServer

启动的HTTP服务监听在http://localhost:8080/, DevServer启动后会一直驻留在后台保持运行，访问这个网址就能获取项目根目录下的index.html。...同时你会发现并没有文件输出到dist目录，因为DevServer会把webpack构建出的文件保存在内存中，在要访问输出的文件时，必须通过http服务访问。...由于DevServer不会理会webpack.config.js里配置的output.path属性，所以要获取bundle.js的正确URL是http://localhost:8080/bundle.js...webpack在启动的时可以开启监听模式，开启监听模式后webpack会监听本地文件系统的变化，发生变化时重新构建出新的结果。...网页和DevServer之间通过WebSocket协议通信，以方便DevServer主动向客户端发送命令。DevServer在收到来自WebPack的文件变化通知时通过注入的客户端控制网页刷新。

9792 0

vue -- 脚手架之webpack.dev.conf.js

module: { rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })//创建模块时匹配请求的规则数组...',//使用内联模式时，在开发工具的控制台将显示消息，可取的值有none error warning info historyApiFallback: {//当使用h5 history api时...{ warnings: false, errors: true } : false, publicPath: config.dev.assetsPublicPath,//此路径下的打包文件可在浏览器中访问...proxy: config.dev.proxyTable,//如果你有单独的后端开发服务器api,并且希望在同域名下发送api请求，那么代理某些URL会很有用。.../static'),//将static文件夹及其子文件复制到 to: config.dev.assetsSubDirectory, ignore: ['.*']//这个没翻译好

1.5K4 0

vue项目中webpack-dev-server的open和host0.0.0.0配置冲突

一个比较老的公司项目，webpack 用的 v3 版本，为了实现localhost、127.0.0.1和本机ip可以同时访问，webpack的devServer里的 host 我们一般会设置成 0.0.0.0...为了解决上面局域网共享的问题，我们就需要将前端服务运行在 0.0.0.0，然后将本机的 ipv4 地址如：http://192.168.2.228:8080 分享给别人，同一局域网内的用户就可以直接访问了...上是被当成无效地址没法访问的，mac上是可以直接访问。...webpack的v3和v4版本使用，而且这个必须设置完整的 host:port，但是这个地方的port我们又不能写成固定的，因为如果自己设置的端口被占用了，webpack-dev-server实际运行起来会帮我们找一个系统未被占用的端口...的几个相关配置devServer.host配置访问地址，host：主机、服务机，v3 和 v4 版本默认 localhost，v5 版本默认是 0.0.0.0devServer.port端口devServer.public

3881 0

webpack4实用配置指南-上手篇

(1) 安装依赖 npm install -D url-loader file-loader url-loader: 小于limit值时，直接base64内联，大于limit就干脆不管了，直接扔给file-loader...同理，当contentBase: path.join(__dirname, 'public')时，访问localhost:3000只会显示public下的文件。...因此在出现文件404时，检查下引用的资源url是否和contentBase里的文件一一对应。...解决方法： host指定为无线网卡的ip，如192.168.0.104，PC与其他移动设备处于同一wifi环境下时即可访问。...devServer: { host: '127.0.0.1', port: 80, hot: true, allowedHosts: [ // 允许哪些域名访问devServer

4.7K17 0

Homestead + laravel-mix 环境下 hmr 的两种玩法

1.vagrant ssh 连接虚拟机，进入项目目录后安装前端依赖 yarn install 2.在 webpack.mix.js 中调整相关配置使用 mix.Webpack() 配置 devServer...devServer 的默认 watch 选项，对于虚拟机环境是无效的（见 webpack 文档[2]）调整 hmrOptions mix.options({ hmrOptions:...在虚拟机终端中执行yarn run hot，然后在浏览器中使用绑定的测试域名（如：laravel.test）访问 34.修改 JS 等，自动编译后浏览器中页面即自动更新玩法二：使用宿主机中的 Node...yarn run hot，然后在浏览器中使用绑定的测试域名（如：laravel.test）访问4....就我个人而言，通常使用第二种，主要原因有二：一是出于性能/延迟方面的考虑，因为在虚拟机中使用轮询（poll）的方式来监听文件变化，当 poll 设置间隔较大时可能会出现一定延迟，而设置太小轮询太频繁则又可能造成一定的性能压力

1.6K1 0

了不起的 Webpack HMR 学习指南（含源码分析）

5. devServer 常用配置和技巧 5.1 常用配置根据目录结构的不同，contentBase、openPage 参数要配置合适的值，否则运行时应该不会立刻访问到你的首页。...5.3 技巧2：默认使用本地 IP 启动服务有的时候，启动服务时，想要默认使用本地的 ip 地址打开： devServer:{ disableHostCheck: true, // true：不进行...那么，Webpack 编译源码所产生的文件变化在编译时，替换模块实现在运行时，两者如何联系起来？...其实， Webpack 将编译结果保存在内存中，因为访问内存中的代码比访问文件系统中的文件快，这样可以减少代码写入文件的开销。...这样 bundle.js 文件代码就作为一个简单 JavaScript 对象保存在内存中，当浏览器请求 bundle.js 文件时，devServer 就直接去内存中找到上面保存的 JavaScript

1.2K0 0

【Webpack】627- 了不起的 Webpack HMR 学习指南（含源码分析）

5. devServer 常用配置和技巧 5.1 常用配置根据目录结构的不同，contentBase、openPage 参数要配置合适的值，否则运行时应该不会立刻访问到你的首页。...5.3 技巧2：默认使用本地 IP 启动服务有的时候，启动服务时，想要默认使用本地的 ip 地址打开： devServer:{ disableHostCheck: true, // true：不进行...其中，HMR Runtime 是构建工具在编译时注入的，通过统一的 Module ID 将编译时的文件与运行时的模块对应起来，并且对外提供一系列 API 供应用层框架（如 React）调用。 ?注意?...其实， Webpack 将编译结果保存在内存中，因为访问内存中的代码比访问文件系统中的文件快，这样可以减少代码写入文件的开销。...这样 bundle.js 文件代码就作为一个简单 JavaScript 对象保存在内存中，当浏览器请求 bundle.js 文件时，devServer 就直接去内存中找到上面保存的 JavaScript

1.1K2 0

谈谈webpack

path: path.resolve(__dirname, 'dist_[hash]') output.publicPath配置发布到线上资源的URL前缀，为string类型。...注意：只有在通过DevServer去启动Webpack时配置项文件里devServer才会生效。 devServer.hot配置是否启用使用DevServer中提到的模块热替换功能。...devServer: { https: true } webpack原理 Webpack的运行是一个串行的过程，从启动到结束会执行以下流程：初始化参数：从配置文件和Shell语句中读取与合并参数，得到最终的参数...，子进程处理完后再把结果发送给主进程。...开启热替换： webpack-dev-server --hot 区分环境区分开发环境和生产环境，进行不同的构建～ CDN加速 CDN又叫内容分发网络，通过把资源部署到世界各地，用户在访问时按照就近原则从离用户最近的服务器获取资源

8323 0

前端常见的跨域方式

同源策略是浏览器中一个重要的安全策略。当两个 URL 的协议、端口和主机都一直时，浏览器认为这两个 URL 是同源的。...这是 JSONP 的格式，请求 JSONP 的数据时，URL 参数会带上一个 callback 的名字，这是像后端表明函数的名称，例如百度的 URL 接口： https://www.baidu.com/...它只能在顶级域与子域之间通信，子域与子域之间也可以相互通信，通信时需要借助 iframe。...也带来了一个问题，自己的本地服务与服务端的服务器不一致，就会出现跨域问题。webpack 的 devServer 配置项可以配置代理服务器来解决这个问题。...有关 devServer.proxy 的更过配置可以浏览官方文档：devServer.proxy[1] http-proxy-middleware webpack-dev-server 内部使用的是非常强大的

1.5K2 0

我是如何调试 Webpack 问题的

好吧，这种情况我似乎没遇到过，一下子没法给出答案，只能要来关键代码：重点看看 webpack.config.js 配置，用到 devServer + HMR 功能，其中： Webpack 版本为 5.37.0...过了一会，小伙伴兴冲冲跑过来跟我说经过一番盲猜，问题被解决了： output.publicPath = '/' 时一切正常 output.publicPath = './' 时出错，返回文件列表页啊？...这玩意还会影响 devServer 的效果，直觉告诉我不应该啊。...第一步：定义问题先复盘一下问题发生的过程： webpack.config.js 同时配置了 ouput.publicPath 与 devServer 运行 npx webpack serve 启动开发服务器...回顾一下代码的流程： webpack-dev-server 启动后会调用自动打开浏览器访问默认路径 http://localhost:9000 此时 webpack-dev-server 接收到默认路径请求

1.1K3 0

我是如何调试 Webpack 问题的

事情是这样的，前两天有个小伙伴问我：「为啥我的 webpack 运行完看不到我写的页面，而是：」 ? 嗯？文件列表页？好吧，这种情况我似乎没遇到过，一下子没法给出答案，只能要来关键代码： ?...过了一会，小伙伴兴冲冲跑过来跟我说经过一番盲猜，问题被解决了： output.publicPath = '/' 时一切正常 output.publicPath = './' 时出错，返回文件列表页啊？...这玩意还会影响 devServer 的效果，直觉告诉我不应该啊。 ?...第一步：定义问题先复盘一下问题发生的过程： webpack.config.js 同时配置了 ouput.publicPath 与 devServer 运行 npx webpack serve 启动开发服务器...回顾一下代码的流程： webpack-dev-server 启动后会调用自动打开浏览器访问默认路径 http://localhost:9000 此时 webpack-dev-server 接收到默认路径请求

2.9K3 0

webpack-dev-server 使用教程

结果这两种方法都将启动一个服务器实例并开始在端口 8080 上侦听来自localhost的连接 webpack-dev-server默认配置为支持在服务器运行时编辑代码时实时重新加载文件常用配置以下只介绍工作中的常用配置...devServer: { port: 8080, }, }; 2、CLI命令启动配置 $ npx webpack serve --port 8080 自动刷新 webpack-dev-server...webpack-dev-server --inline 反向代理与Nginx类似，webpack-dev-server也是通过url正则匹配的方式进行url代理配置，常用配置参考如下： // webpack.config.js...地址才可以访问该服务，常用于开发阶段模拟网络网络防火墙对访问IP进行限制。...当该配置项被配置为all时，会跳过host检查，但不建议这样做，因为有DNS攻击的风险 1、webpack配置项配置 module.exports = { //...

4342 0

微前端——single-Spa

挟持 url 变化，url 变化时匹配对应子应用，并执行生命周期流程。用于前端微服务化的JavaScript前端解决方案 (本身没有处理样式隔离、js执行隔离) ，实现了路由劫持和应用加载。..."webpack-config-single-spa"，一个可共享的、可定制的 webpack 配置，是已经帮忙做好的关于single-spa的webpack 文件。...npm:build:*" },***由于子应用都是经过single-spa改造过的，因此运行起来有些不同直接运行yarn start，会提示微前端不在这，需要到主应用的端口访问图片yarn start...start()（2）改造子应用下载对应的包装器，如single-spa-vue，下载几个包：systemjs-webpack-interop、vue-cli-plugin-single-spanpm i...引入项目以后，还需要考虑到子项目对其他模块的影响，虽然我们可以制定规范，比如各子项目使用唯一地命名前缀等，但这种人为约定往往又是不那么靠谱，对于css，我们还可以在构建时使用一些工具自动添加前缀，这样可以比较靠谱的避免冲突

3.7K2 0

webpack 4 入门

(/assets/spinner.gif); * 静态资源最终访问路径 = output.publicPath + loader 或插件等配置路径 */ devServer.publicPath:...可以修改通过 devServer.publicPath 来修改请求资源时的服务器前缀，示例： // webpack.config.js module.exports = { ......devServer: { publicPath: '/assets/' } }; /* * 现在可以通过 http://localhost:8080/assets/bundle.js 访问...* devServer.publicPath 也可以是一个完整的 URL。 * 一般情况下都要保证 devServer.publicPath 与 output.publicPath 保持一致。...*/ devServer.contentBase: 告诉服务器从哪里提供内容，只有在提供静态文件时才需要默认情况下，将使用当前工作目录作为提供内容的目录，但是你可以修改为其他目录，示例： // webpack.config.js

7112 0

React-day2-webpack高级

为了满足我们的发布策略，需要新建一个配置文件，命名为webpack.publish.config.js，将webpack.config.js的配置拷贝过去，剔除一些开发配置项即可：将devServer...webpack.HotModuleReplacementPlugin() 修改url-loader，将图片放入统一的images文件夹之下： { test: /\....[ext]' } 或者使用img-前缀加上7位的hash名称： { test: /\.(png|jpg|gif)$/, use: 'url-loader?...[ext]' } 在package.json中的script节点下新增dev命令，通过--config指定webpack启动时要读取的配置文件： "pub": "webpack --config webpack.publish.config.js...: '"production"' }) 优化压缩HTML文件在plugins节点下的htmlWebpackPlugin插件中，添加minify子节点： minify:{// 压缩HTML代码

3872 0

Webpack相关基础

file-loader：分发文件到output目录并返回相对路径 url-loader：与file-loader类似，但可以将小于配置limit大小的文件转换成内敛Data Url的方式，减少请求。...：插件必须是一个函数或是包含apply方法的对象，这样才能访问compiler实例 class MyPlugin{ //Webpack会调用MyPlugin实例的apply方法给插件实例传入compiler...开启HMR，要在webpack配置文件的devServer中设置hot为true即可。...代理配置 webpack中提供服务器的工具为webpack-dev-server，只适用与开发阶段配置核心为：devServer -> proxy 原理 Proxy工作原理实际上利用http-proxy-middleware...在本地开发时启动了一个服务器，我们开发的应用运行在这个服务器上后端服务运行在另一个服务上这个时候由于浏览器的同源策略，访问后端服务就会出现跨域现象然后使用devServer-proxy配置，相当于开了一个代理服务器

5452 0

【已解决】多种方式最新解决Invalid Host header(无效的主机头)服务器域名访问出现的错误

项目启动成功，但是页面显示Invalid Host header二、报错原因分析新版的webpack-dev-server出于安全考虑会默认检查hostname，用于防止不受信任的主机访问DevServer...，当浏览器发出请求时，它会会检查请求中的主机头，若hostname 没有配置在内，则中断访问。...默认情况下，Webpack DevServer会检查请求的主机是否与配置中的主机匹配，以增加安全性。...如果配置中没有明确指定主机（host），Webpack DevServer将只允许本地主机访问，以防止潜在的安全风险。...当你使用浏览器的前进和后退按钮或手动输入URL时，Vue Router或其他路由库会在前端进行路由切换，但如果没有合适的配置，刷新页面时会导致404错误。

3.5K0 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭