解决NATAPP.CN在vue项目中 invalid host header 问题

最新推荐文章于 2023-02-27 17:07:15 发布
最新推荐文章于 2023-02-27 17:07:15 发布
阅读量407 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/C_TopTopTop/article/details/128331600
版权 
//在vue.config.js中加入
  devServer: {
    disableHostCheck: true,
  }

然后重启项目！！！！

需要的话重新配置隧道里的端口号

重新访问即可，因为我本地连的后端本地有跨域问题，后续使用了跨域浏览器访问，（跨域浏览器----》之前有记录）

按时搬砖的小陈
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
[微信支付]使用Natapp实现本地内网进行开发测试以及解决webpack "Invalid Host header"问题
YuanMxy'Home
04-16 2265
1.微信开发的无奈 最近接手的系统在做微信支付,可是微信的支付授权目录要求必须是外网域名且不支持ip地址 我了个亲娘来,那好吧,直接在服务器上进行开发测试,结果微信支付太多bug,在服务器测试不方便,那咋办呀!!!能否在本地继续开发测试,又能按照微信支付授权目录的规则呢? 使用Natapp等进行内网穿刺即可 2.什么Natapp呢? natapp 基于ngrok的反向代理软件，通过在公网和本地...
Vue 项目中出现 Invalid Host header 解决办法
qq_44290077的博客
08-31 2119
问题提出 当使用 natapp ，对 Vue 项目进行内网穿透时，访问项目外网网址出现 Invalid Host header 情况。 解决方法 在项目的根目录下，应该有一个 vue.config.js 文件，如果没有直接新建一个，然后在其中加入配置 module.exports = { devServer: { disableHostCheck: true } } 再访问项目外网网址，发现问题已经解决。 ...
natapp遇到Invalid Host header问题的解决方案
Xiaoqiang_1997的博客
12-13 3603
近期公司安排跟企业微信对接。用到了natapp内网穿透，natapp配置好之后访问前端页面出现invalid host header问题。 在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加入disableHostCheck: true即可转发成功 devServer: { disableHostCheck: true, } vue-cli版本3.0的情况下修改vue.config.js的配置 module.exports = {
natapp域名访问Invalid Host header问题
岁月如歌去，十年弹指间
03-09 4651
在natapp域名指向本地服务器访问时,webpack项目提示Invalid Host header. 这是由于新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname 不是配置内的，将中断访问。可以在build目录中的webpack.dev.config.js中添加如下配置： //webpack.dev.config.js d...
解决vue脚手架5.0版本使用natapp访问时出现invalid Host header问题
qq_52016756的博客
07-26 761
使用vue脚手架的时候，执行了npmrunserve后出现对应的端口号，然后去natapp网站里设置相应的端口号，开启渗透，在访问此端口的时候，出现了invalidHostheader，此时，针对vue脚手架版本为5的情况下，只需要在目录里vue.config.js里设置一下的代码，假如在开启natapp后，我的随机域名就是。然后对应的allowedHosts里写入.natappfree.cc。在vue.config.js里设置访问域名即可。...
【natapp】穿透访问vue项目出现Invalid Host header
qq_36723436的博客
05-23 440
vue.config.js 将允许访问开发服务器的服务列入白名单 module.exports = { devServer: { allowedHosts: [".natappfree.cc"], }, }; webpack配置文档链接 https://webpack.docschina.org/configuration/dev-server/#devserverallowedhosts
natapp解决Invalid Host header的问题
weixin_30698527的博客
01-22 484
最近在做一个微信公众号项目，用微信开发工具调试本地项目，需要做一下内网穿透，代理都配置好了，页面出现这个Invalid Host header错误，内网穿透工具我是用的frps做的，最后通过google找到方法，在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加入disableHostCheck: true即可转发成功 1 devSer...
解决vue项目中出现Invalid Host header的问题
01-18
在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加入disableHostCheck: true devServer: { disableHostCheck: true, } vue-cli版本3.0的情况下修改vue.config.js的配置 module.exports = { ...
详解@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项目中跨域问题解决方案
08-27
本文给大家介绍了vue项目中跨域问题的完美解决方案，通过更改header，使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建），具体内容详情大家跟随脚本之家小编一起学习吧
在Vue项目中安装配置Math.js的方法解决计算bug问题
01-20
1、 安装 输入命令npm install mathjs 进行安装； 出现 如下图所示则证明安装成功。 2、配置math.js const { create, all } = ...Vue.prototype.$math = math; 注：该行代码也是写在main.js文件中。（main.js为该项
操作INI文件
07-09
打开和写入INI文件的一DLL有不明白的可来问我。<br>在使用时要先设置INI文件的路径。<br>tools.hyk@163.com
使用NATAPP内网穿透
chelflan's blog
05-27 981
使用NATAPP内网穿透
记录---------部署在服务器上的Vue前端页面请求出错，net::ERR_CONNECTION_TIMED_OUT的一个解决办法
Laiguibing521的博客
06-30 4680
1、事情是这样的 一个vue前端项目部署到阿里云上了，最开始请求数据的时候正常运行，过了两天之后再请求，就出错了。显示网络错误，连接超时。 下图是F12-Console里的内容 2、网上的解决办法 ref:清理缓存的。也没解决 3、自己问题的解决办法 用Postman测试接口的时候，发现也不能返回数据了。在想可能就是防火墙的问题，在服务器后台查看开放的端口，发现9090端口没有开放，所以外网无法访问。 防火墙的配置如下： ref:参考 #1、开放端口 firewall-cmd --zone=public
Invalid Host header 服务器域名访问出现的问题
weixin_51225684的博客
02-27 1773
经查是因为新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不是配置内的就不能访问。这样有2中方法，一种是设置跳过host检查，一种是直接host设置成你的地址。同样的原理，可以在package.json文件修改scripts命令:webpack-dev-server --disableHostCheck=true。package.json的script语句: webpack-dev-server --host=或者--public=
内网穿透访问Vue项目的时候出现Invalid Host header解决办法
双眸
05-09 4365
适用场景: 在本地的Vue-cli3项目, 需要其他人浏览. 如果没有外网的服务器, 可以把自己的电脑当做服务器. 这时候需要外网的人能访问到自己的电脑. Mac内网穿透工具：natapp Invalid Host header 当启动了natapp以后, 就这个用natapp提供的域名, 来访问本地的127.0.0.0:8080(端口自己设置), 如果Vue项目启动, 外网就可以通过域名来访问...
vue3项目 Invalid Host header怎么解决详细一点
最新发布
05-03
"Invalid Host header" 错误通常是由于请求头中的 Host 值与实际请求的域名不匹配而引起的。在 Vue3 项目中出现这个错误的原因可能是以下几个方面： 1. 开发模式下，你的本地开发服务器的 HOST 配置不正确。 解决方案：在 package.json 文件中添加 "--host 0.0.0.0" 参数，如下所示： ``` "scripts": { "serve": "vue-cli-service serve --host 0.0.0.0", ... } ``` 2. 生产模式下，你的服务器配置不正确。 解决方案：检查你的服务器配置文件中的 Host 配置是否正确，例如 Nginx 配置文件中的 server_name 是否与你的域名匹配。 3. 使用了反向代理服务器，反向代理服务器配置不正确。 解决方案：检查反向代理服务器的配置文件中的 Host 配置是否正确。 4. 前端代码使用了错误的请求地址。 解决方案：检查你的前端代码中的请求地址是否正确。 需要注意的是，在 Vue3 项目中，你可以在 vue.config.js 文件中添加 devServer 配置，例如： ``` module.exports = { devServer: { disableHostCheck: true } } ``` 设置 disableHostCheck 为 true，可以暂时解决 "Invalid Host header" 错误，但这并不是一个好的解决方案，因为它会关闭 Host 校验，存在安全风险，建议在正式环境中不要使用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值