解决vue2.*开发环境下报错Invalid Host/Origin header，[WDS] Disconnected!

最新推荐文章于 2024-04-26 16:38:08 发布
最新推荐文章于 2024-04-26 16:38:08 发布
阅读量2.4k 收藏 3
点赞数 7
分类专栏： 技术坑 文章标签： vue dev 开发环境 webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lifachang/article/details/103201799
版权

vue2.*在dev环境下，打开链接后控制台一直刷报错如下图：
在这里插入图片描述
解决办法：
第一步：修改根目录下/config/index.js文件内的host值为’127.0.0.1’
第二步：修改根目录下/build/webpack.dev.conf.js文件内的devServer，在devServer下增加一行：disableHostCheck: true,
第三步：重新启动dev
以下是我修改成功后的代码截图：
在这里插入图片描述
在这里插入图片描述

神烦大人
关注
  • 7
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
解决Invalid Host/Origin header，[WDS] Disconnected!报错
Debug的博客
03-21 2053
第一步：第二步：第三步：重新启动dev即可
详解@Vue/Cli 3 Invalid Host header 错误解决办法
12-09
我的host设置 报错如下： 解决办法： @Vue/Cli 3 在vue.config.js里加上 .disableHostCheck(true) vue-cli 在webpack.dev.conf.js里加上 devServer: { disableHostCheck: true } 最后
vue出现Invalid Host/Origin header，[WDS] Disconnected!
qq_42388853的博客
05-14 1026
转载一波网址。写的很好https://blog.csdn.net/lifachang/article/details/103201799
Springboot+Vue2在使用花生壳时invalid host header问题
最新发布
m0_50573190的博客
04-26 436
设置跳过host检查。
解决Vue2中控制台报错 [WDS] Disconnected! 问题
Mr.小灰狼_随笔
07-19 933
解决Vue2中控制台报错 [WDS] Disconnected! 问题 Vue2 项目打开控制台时发现如下报错 ： [WDS] Disconnected! client?9556:172 其实并没有对项目运行本身造成什么实质性的影响，但是一条红色的提示摆在那里确实不太好看，还是把他给解决掉吧。
vue2.0 ie 报错Invalid Host/Origin header
cccdf_jjj的博客
08-21 1307
先讲一下报的什么错误，我用vue2.0搭建的项目，再谷歌火狐上都没有问题，但是放到ie上就开是报错，报的我头疼也是 这时报错的信息 一直自己在那边循环着报，什么鬼呀。 后来大概找到报错原因，我同时启动了两个项目，只有一个报错，一个是localhost:8080的另外一个是localhost:8081的结果81的就一直报错，止不住的报，后来发现好像是本地代理的问题，不管了，反正我这样解决就...
vue中控制台报错[WDS] Disconnected的解决办法
小多的博客
03-09 5803
方法一： 有的说使用了全局代理，将 loaclhost 改成 127.0.0.1 vue.config.js配置项 // 配置 webpack-dev-server 行为。 devServer: {undefined // open: true, open: process.platform === 'darwin', // 项目构建成功之后，自动弹出页面 host: '0.0.0.0', //允许外部ip访问,主机名，也可以127.0.0.0 || 做真机测试时候0.0.0.0
解决vue.js 数据渲染成功仍报错的问题
12-09
最近在做一个vue项目，用的是官方推荐的axios请求数据，数据结构是一级对象嵌套二级对象，发现一级对象数据渲染不报错，二级数据渲染报错。很是郁闷！data函数如下 export default { name: 'hello', data() { ...
webstorm和.vue中es6语法报错的解决方法
12-09
1.webstorm中es6语法报错，解决方法： 打开 Settings => Languages & Frameworks => Javascript 把 Javascript Language version 改为 ECMAScript 6 这样做所有的.js文件中es6不再报错，但是.vue文件中es6语法依然...
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
10-17
在Vue.js 2.*版本中，项目的环境搭建、运行和打包发布是开发流程的基础步骤。以下将详细介绍这些过程。 首先，开始环境搭建。Vue.js 2.*项目需要Node.js作为基础环境，确保已安装最新稳定版的Node.js。接着，我们...
vue项目中chunk-vendors.js提示报错的查看方法
m0_54853420的博客
03-02 8353
经常在vue项目中，会有chunk-vendors.js报出的各种错误提示，但可能有的报错很多人不懂的如何查看，接下来，给大家一个示例： 上图中的报错，很多人可能只会看【Vue warn】中的错误，而忽略【system】中的错误提示，导致在页面中找了无数个“indexOf”也解决不了错误，其实这条错误产生的步骤都已经在【system】中。让我们由下往上看，错误产生的步骤流程依次是settlement–>otherfun–>list_fun–>audio_play,很明显是因为audio_
VUE项目之IE白屏
qq_42122531的博客
12-27 2529
项目场景： vue项目需要在谷歌火狐ie11兼容 问题描述： vue项目在谷歌火狐正常，在ie11白屏 chunk-vendors.js报错，app.js报错 原因分析： 1、chunk-vendors.js报错，错误的来源在node_modules里的文件里，所以应该是依赖包的兼容问题 2、app.js报错，定义在编译代码上的问题 解决方案： 1.chunk-vendors.js: 通过网上各种百度，找到了一些比较合理的解决方案，我们可以根据报错定位到该node_modules，里
vue项目,ie,360报错"promise未定义错误"和"Invalid Host/Origin header"解决办法
我的个人博客
01-13 549
vue项目在ie或者360浏览器打开,报错"promise未定义错误",低版本浏览器不兼容axios请求的promise; 解决办法一:安装 babel-polyfill依赖 npm install --save babel-polyfill main.js文件引入 import 'babel-polyfill' webpack.base.conf.js文件修改,标记部分修改 ...
Invalid Host/Origin header[WDS] Disconnected! IE
chuijian2218的博客
07-23 645
在IE上运行vue项目突然报错：，而且是ie11和10报错，ie9却没有问题； vue2相关依赖是一番搜索，也没有解决，都说是webpack热更新问题，而我确实在安装babel-polyfill用于使ie9支持promise之后才发生的，最后发现 import的时候 babel-polyfi...
[vue3]Invalid Host/Origin header [WDS] Disconnected!
weixin_33875564的博客
01-09 283
2019独角兽企业重金招聘Python工程师标准>>> ...
webpack `Invalid Host/Origin header`问题
菜鸟karroy
04-26 1815
问题描述 webpack Invalid Host/Origin header问题 解决办法 这是webpack本身出于安全考虑，因为不检查主机的应用程序容易受到DNS重新绑定攻击。但是，在我们的开发环境下，可以禁用掉disableHostCheck这一配置项。 在config目录中的index.js中添加如下module.exports配置：disableHostCheck: true, ...
vue项目，chrome控制台出现 webpack 报错 [WDS] Disconnected
hery186的专栏
05-02 3万+
GET http://127.0.0.1:8000/sockjs-node/info?t=1481812063392 net::ERR_CONNECTION_REFUSED [WDS] Disconnected! 这种错误一直不知如何解决，也没去管他，因为不影响运行Failed to load resource: net::ERR_CONNECTION_ABORTED因为用了全局代理软件，所以...
解决 Vue 项目 invalid host header 问题（两种方案）
热门推荐
无聊猿的博客
03-14 4万+
问题出现背景 做微信H5网页时，使用花生壳内网穿透进行调试时，打开网页显示：invalid host header 分析问题 这句话的意思是：无效的Host请求头； 因为在vue在调试时相当于启动了一个服务器以供我们访问（当我们build后，就可以放在我们自己的nginx等服务器） 测试环境下的webpack有一个host检查功能：webpack的devServer中 如果不配置host就无法访问，解决办法有好几种，可以去设置host，比如： 第一种解决方案 设置允许访问的域名 module.exports
uni-app - Invalid Host header （访问网页出现此报错信息，主机标头无效）详细解决方案
王佳斌
11-28 5672
uniapp Invalid Host header，Invalid Host header 问题解决，uniapp 报错Invalid Host header，Invalid Host header 服务器域名访问出现的问题，解决uni-app 用nginx反向代理出现Invalid Host header问题，uniapp 项目访问报错Invalid Host header，uniapp 项目中 报错Invalid Host header时该如何处理，uniapp 报错Invalid Host head
uniapp报错../../../../unpackage/dist/dev/app-plus/app-service
08-21
根据你提供的引用内容，uniapp报错../../../../unpackage/dist/dev/app-plus/app-service。根据提供的信息，我们可以得出以下结论： 1. 这是一个uniapp的报错信息。 2. 报错的路径为../../../../unpackage/dist/dev/app-plus/app-service。 根据以上信息，这个报错通常是由文件路径错误或者文件缺失导致的。你可以尝试以下几个解决方案： 1. 检查报错的路径是否正确，确认路径是否指向正确的文件。 2. 检查项目中是否有缺失的文件，尤其是在路径所指向的位置是否存在相应的文件。 3. 检查项目的依赖是否正确安装，如果依赖缺失可能会导致文件路径错误或文件缺失。 如果以上方案无法解决问题，你可以尝试以下操作： 1. 安装vite和@vitejs/plugin-vue依赖：npm i vite @vitejs/plugin-vue --save-dev 。 2. 在Hbuilder中打开目录frontend，然后在运行菜单中选择运行到微信开发者工具或者使用微信开发者工具直接打开frontend -> unpackage -> dist -> dev -> mp-weixin文件夹来运行微信小程序。 希望以上的解决方案能够帮助你解决报错问题。如果问题还存在，请提供更多的细节或报错信息，以便我们能够更好地帮助你。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [uniapp报错](https://blog.csdn.net/weixin_45741366/article/details/129716217)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [【vue3vite运行报错】Failed to resolve import “@vue/server-renderer from “src\App.vue“. Does the ...](https://blog.csdn.net/wangguoqing_it/article/details/129274876)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [垃圾分类开源小程序，垃圾识别精灵，uni-app开发框架 开源](https://download.csdn.net/download/muyeseocom/24600043)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

神烦大人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值