使用ngrok发布本地HTTPS Vue应用访问报错该如何解决？

问题根源 #

默认ngrok http 8080命令仅会将公网流量转发到本地的HTTP 8080端口，本地Vue服务运行在HTTPS协议上时，协议不匹配会直接导致请求失败，可通过以下方案解决：

方案1：调整ngrok转发命令（推荐，无需修改本地项目配置） #

直接指定ngrok转发到本地HTTPS服务即可，基础命令如下：

ngrok http https://localhost:8080

如果你的本地HTTPS服务使用自签名证书，需要额外添加--host-header参数避免证书校验不通过：

ngrok http https://localhost:8080 --host-header=localhost:8080

如果自签名证书校验仍然报错，可以添加--insecure参数跳过本地证书校验环节：

ngrok http https://localhost:8080 --host-header=localhost:8080 --insecure

命令执行成功后，直接访问ngrok生成的公网地址即可正常访问本地Vue服务。

方案2：临时切换本地Vue服务为HTTP协议 #

如果当前开发场景不需要本地HTTPS环境，可以修改项目配置关闭HTTPS后，用原命令转发即可，以Vue CLI创建的项目为例：

• 打开项目根目录下的vue.config.js配置文件
• 找到devServer配置项，将其中的https属性设置为false
• 重启本地Vue开发服务，再执行原ngrok http 8080命令即可正常转发

异常排查 #

• 调整配置后仍访问失败时，先确认本地https://localhost:8080可以正常访问，排除本地服务本身运行异常的问题
• 如果ngrok日志返回400/404类状态码，检查--host-header参数是否和本地Vue服务配置的host、端口一致，匹配本地服务的域名校验规则

内容的提问来源于stack exchange，提问作者Cardoso