ngrok实现内网穿透,vue项目invalid host header报错

news/2024/11/22 21:31:35/

目的:使自己的本地的vue项目可以在外网上访问。
本地访问:http://localhost:8080/
外网访问:通过ngrok生成一个链接,这个链接在其他网络环境下都可以访问。

windows下安装
1.注册并下载ngrok,注册的时候需要验证码,有时候登不上去,用到了外网。(我用的是猎豹加速器,可以每天登录签到,有一个小时的使用时长)在这里插入图片描述

2.解压并运行exe文件

在这里插入图片描述

3.登录到ngrok中获取专属密钥
在这里插入图片描述

4.执行上面的命令,会自动创建一个配置文件ngrok.yml。
5.输入下面的命令,即将本地端口8080映射到外网中,如果需要映射其他端口,只需将8080改成相对应的端口即可。

ngrok http 8080


在这里插入图片描述

6.输入上面的网址就可以运行项目了。
参考的ngrok文章

问题:访问vue项目,页面问题
内网穿透访问Vue项目的时候,页面出现Invalid Host header
常规做法:
//在 vue.config.js文件中添加
module.exports = {
devServer: {
disableHostCheck: true
}
}

在这里插入图片描述

运行项目时报错,显示没有disableHostCheck这个属性

解决方法:
这个属性应该是被弃用了,需要换一种写法。方案链接。
将 disableHostCheck:true
替换为
historyApiFallback: true,
allowedHosts: “all”,

重新配置vue.config.js

devServer: {
historyApiFallback: true,
allowedHosts: “all”,
}

最后重新启动项目 npm run serve
打开链接,显示出项目
 


http://www.ppmy.cn/news/90626.html

相关文章

STM32单片机WIFI教室灯光控制系统人数自动灯光温度时间

实践制作DIY- GC0135-WIFI教室灯光控制系统 一、功能说明: 基于STM32单片机设计-WIFI教室灯光控制系统 二、功能介绍: 电路:STM32F103C最小系统板DS18B20温度传感器LCD1602显示器ESP8266WIFI模块4个红外槽型光电传感器3个LED灯多个按键蜂鸣…

CAMx-Python融合技术与大气污染来源解析方法

模型简介 CAMx模型是一个基于大气化学,针对臭氧、颗粒物(PM)、和雾霾天气过程的大气污染物计算模型。该模型由安博英环( Ramboll Environ )技术团队在美国国家环保局和许多州立环保部门的支持下不断开发和完善。 美国国家环保局利用CAMx来评估国家减排计划带来的臭…

Class 05 - 逻辑运算符and,or,not 和 条件语句 if

Class 05 - 逻辑运算符and,or,not 和 条件语句 if 逻辑运算符和条件语句逻辑运算符 and , or , notand 运算符“&”OR 运算符 “|”not 运算符“! 案例运用 and , or , notsubset() 筛选数据AND 实例OR 实例NOT 实例混合使用实例 条件语句 ifif 语句else语句els…

深入解析Spring源码系列:Day 1 - Spring框架的核心概述

深入解析Spring源码系列:Day 1 - Spring框架的核心概述 大家好!我是一名Java开发工程师,非常高兴能够与大家一起探索并分享关于Spring源码的知识。在这个系列的博客中,我将带领大家深入了解Spring框架的内部工作原理,…

Java Web 编写第一个Servlet程序全过程

一、工具准备 IDEATomcat 二、创建一个名为hello-servlet的maven项目 三、在工程根目录下创建一个web文件夹&#xff0c;web文件夹下创建WEB-INF目录&#xff0c;WEB-INF目录下创建web.xml文件&#xff0c;目录结构以及web.xml文件内容如下&#xff1a; <?xml version&qu…

一文get关于BSCI的新知识

【一文get关于BSCI的新知识】 Q:amfori是什么? A:作为全球领先的贸易协会&#xff0c;amfori致力于开放和可持续贸易。他们汇集了来自40多个国家的零售商、进口商、品牌和协会&#xff0c;目的是系统地监督和改善世界各地的供应商的工作条件。“amfori BSCI”和“amfori BEPI”…

手写简单的RPC框架(一)

一、RPC简介 1、什么是RPC RPC&#xff08;Remote Procedure Call&#xff09;远程过程调用协议&#xff0c;一种通过网络从远程计算机上请求服务&#xff0c;而不需要了解底层网络技术的协议。RPC它假定某些协议的存在&#xff0c;例如TPC/UDP等&#xff0c;为通信程序之间携…

linux系统采集方法

Linux系统是一个非常流行的操作系统&#xff0c;广泛应用于服务器和嵌入式设备。在Linux环境中&#xff0c;我们可以使用各种工具来收集信息、监控系统和获得实时性能数据。本文将介绍一些用于采集系统信息的常用工具。 一、系统命令 top&#xff1a;用来查看系统各项资源使用…