当前位置： 首页 > article >正文

Ngrok 内网穿透实现Django+Vue部署

article 2025/10/27 12:42:22

目录

Ngrok 配置

注册/登录 Ngrok账号 官网ngrok | API Gateway, Kubernetes Networking + Secure Tunnels

直接cmd运行

使用随机生成网址：ngrok http 端口号

使用固定域名生成网址：ngrok http --domain=你的固定域名 端口号

Django 配置

1.You're accessing the development server over HTTPS, but it only supports HTTP

问题1解决方法

Vue 配置

1.This request has been blocked;  the content must be served over HTTPS

问题1解决方法

Ngrok 配置

注册/登录 Ngrok账号 官网ngrok | API Gateway, Kubernetes Networking + Secure Tunnels

先登录后Ngrok后才好下载对应的软件，博主尝试不登陆直接下载软件，反正就是一直打不开下载网页，登录后就能直接下载了

将下载后的压缩包直接解压就可以运行ngrok.exe

如果不想每次运行都是随机的域名，可以固定域名，只不过这个域名是他随机生成的，不能自定义，起码不用每次都换网址了，免费的话只能生成一个固定域名

直接cmd运行

运行ngrok.exe后 

使用随机生成网址：ngrok http 端口号

通过这个网址就能访问到自己本地的对应的http://localhost:9000网址，可以理解为ngrok往你的地址发送了个请求

使用固定域名生成网址：ngrok http --domain=你的固定域名 端口号

Django 配置

就是正常运行Django即可，但是可能会遇到几个问题

1.You're accessing the development server over HTTPS, but it only supports HTTP

2.

问题1解决方法

先安装这3个包

pip install django-extensions

pip install django-werkzeug-debugger-runserver

pip install pyOpenSSL

然后在django上添加上对应的app

INSTALLED_APPS = [#######......#######'werkzeug_debugger_runserver','django_extensions',#######......#######
]

在setting.py 文件上添加上运行指定域名访问（全允许会不安全）

# 允许所有域名访问
CORS_ALLOW_ALL_ORIGINS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

运行服务

python manage.py runserver_plus --cert server.crt ip地址:端口号

Vue 配置

1.This request has been blocked;  the content must be served over HTTPS

2.Blocked request. This host ("octopus-******.ngrok-free.app") is not allowed.
To allow this host, add "octopus-******.ngrok-free.app" to `server.allowedHosts` in vite.config.js.

问题1解决方法

记得向Django请求把http改为https即可

另外的尝试 

在 <head> 标签 里面的  <meta http-equiv >  改为下面的 没有的话就直接添加上

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

问题2解决方法

需要在vite.config.ts 里面加上允许的端口号

    server: {port: 90000,host: '0.0.0.0',open: true,allowedHosts:  ['octopus-****.ngrok-free.app'],},

相关文章：

Ngrok 内网穿透实现Django+Vue部署

目录 Ngrok 配置 注册/登录 Ngrok账号 官网ngrok | API Gateway, Kubernetes Networking Secure Tunnels 直接cmd运行 使用随机生成网址&#xff1a;ngrok http 端口号 使用固定域名生成网址&#xff1a;ngrok http --domain你的固定域名 端口号 Django 配置 1.Youre a…...

编程日记 2025/10/27 12:42:22

利用OLED打印调试信息: 控制PC13指示灯点灯的实验

Do口暗的时候才是高电平,因为光敏电阻传感器的高电平是依靠LM393电压比较器上引脚进入高阻态再加上上拉电阻上拉产生的高电平DO口什么时候会输出高阻态?电压比较器的正极输入电压大于负极输入电压,而正极输入电压是光敏电阻分得的电压,光敏电阻的阻值越大,已分得的电压就越大,…...

编程日记 2025/10/27 12:42:18

240422 leetcode exercises

240422 leetcode exercises jarringslee 文章目录 240422 leetcode exercises[237. 删除链表中的节点](https://leetcode.cn/problems/delete-node-in-a-linked-list/)&#x1f501;节点覆盖法 [392. 判断子序列](https://leetcode.cn/problems/is-subsequence/)&#x1f501;…...

编程日记 2025/10/24 16:10:26

mybatis mapper.xml中使用枚举

重点&#xff1a;application.propertis配置类 #TypeEnumHandler 这个类的包名&#xff0c;不是全路径 mybatis.type-handlers-packagecom.fan.test.handler两个枚举类&#xff1a; public enum StatusEnum {DELETED(0),ACTIVE(1);private final int code;StatusEnum(int cod…...

编程日记 2025/6/15 3:10:36

【初级】前端开发工程师面试100题（二）

本题库共计包含100题，考察html，css，js，以及react，vue，webpack等基础知识掌握情况。 TypeScript篇 TypeScript和JavaScript有什么区别？ TS是JS的超集，添加了静态类型系统，编译时检查类型错误，适合大型项目。interface和type有什么区别？ interface主要用于描述对象形…...

编程日记 2025/9/29 23:14:18

Appium安装 -- app笔记

调试环境&#xff1a;JDK&#xff08;java&#xff09; SDK&#xff08;android&#xff09; Node.js 雷神模拟器&#xff08;或 真机&#xff09; Appium&#xff08;Appium Server【内外件&#xff08;dos内件、界面化工具&#xff09;】、Appium Inspector&#xff09; p…...

编程日记 2025/10/27 12:42:14

2025.04.23华为机考第一题-100分

📌 点击直达笔试专栏 👉《大厂笔试突围》 💻 春秋招笔试突围在线OJ 👉 笔试突围OJ 01. 星空探索者 问题描述 LYA是一位天文学爱好者，她拍摄了一张星空照片并将其数字化为二维亮度图。在这张图像中，每个像素点的值代表该位置的亮度。现在，LYA想要寻找特定亮度的星…...

编程日记 2025/6/18 22:18:14

【OpenGL】OpenGL学习笔记-1：VS2019配置OpenGL开发环境

在Visual Studio 2019中可以通过手动配置库文件或NuGet包管理器快速安装的方法配置OpenGL环境&#xff0c;详细步骤如下&#xff1a; 一、打开VS2019&#xff0c;创建新的控制台项目 二、方法一&#xff1a;手动配置GLEW/GLFW/GLAD库 GLFW是窗口管理和输入事件的基础设施&…...

编程日记 2025/10/27 12:42:10

集结号海螺捕鱼游戏源码解析（第二篇）：水浒传捕鱼模块逻辑与服务器帧同步详解

本篇将全面解构“水浒传”子游戏的服务端核心逻辑、帧同步机制、鱼群刷新规则、客户端命中表现与服务器计算之间的协同方式&#xff0c;聚焦于 C 与 Unity3D 跨端同步的真实实现过程。 一、水浒传捕鱼模块资源结构 该模块包含三部分核心目录&#xff1a; 子游戏/game_shuihuz…...

编程日记 2025/10/27 12:42:07

从零到一实现 .NET Core 项目 + JWT 认证

知识文档：从零到一实现 .NET Core 项目 + JWT 认证 1. 知识点概述 本项目通过实现 JWT 身份验证，完成以下功能： 用户登录并生成 JWT Token。使用 [Authorize] 属性保护受控资源。测试登录和受保护资源访问的完整流程。JWT（JSON Web Token）是一种轻量级的认证机制，广泛用…...

编程日记 2025/6/19 0:48:42

【音视频】FFmpeg内存模型

FFmpeg内存模型 从现有的Packet拷贝一个新Packet的时候&#xff0c;有两种情况&#xff1a; 两个Packet的buf引用的是同一数据缓存空间&#xff0c;这时候要注意数据缓存空间的释放问题&#xff1b;两个Packet的buf引用不同的数据缓存空间&#xff0c;每个Packet都有数据缓存…...

编程日记 2025/10/27 12:42:03

QML 样式库

在 QML 中&#xff0c;样式库&#xff08;或 UI 框架&#xff09;用于快速构建一致且美观的界面。Qt/QML 本身不提供内置的完整样式库&#xff0c;但可以通过以下方式实现样式管理或使用第三方库。 1. Qt Quick Controls 2 样式系统 Qt Quick Controls 2 是官方提供的 UI 组件…...

编程日记 2025/9/25 12:39:22

小白自学python第一天

学习python的第一天 一、常用的值类型&#xff08;先来粗略认识一下~&#xff09; 类型说明数字&#xff08;number&#xff09;包含整型&#xff08;int&#xff09;、浮点型&#xff08;float&#xff09;、复数&#xff08;complex&#xff09;、布尔&#xff08;boolean&…...

编程日记 2025/10/27 12:42:00

2022 年 9 月青少年软编等考 C 语言七级真题解析

目录 T1. 二叉树的深度T2. 迷宫思路分析T3. Sequence思路分析T4. Priority Queue 练习题思路分析T1. 二叉树的深度 题目链接：SOJ D1164 此题为 2022 年 3 月七级第三题原题，见 2022 年 3 月青少年软编等考 C 语言七级真题解析中的 T3。 T2. 迷宫 题目链接：SOJ D1213 一…...

编程日记 2025/7/2 3:27:03

手动实现LinkedList

前言 大家好&#xff0c;我是Maybe。最近在学习数据结构中的链表&#xff0c;自己手动实现了一个LinkedList。我想与大家分享一下。 思维导图 代码部分 package Constant;public class constant {public static final String INDEX_IS_WRONG"输入的下标不合法"; }p…...

编程日记 2025/10/27 12:41:56

maven的安装与配置、IDEA集成maven

一、maven的安装与配置环境变量 maven的下载与安装&#xff0c;配置环境变量与验证【附安装包3.6.1&#xff0c;3.8.8&#xff0c;3.9.9】-CSDN博客 参考资料&#xff1a;黑马程序员 二、IDEA集成 2.1 当前工程设置 1. 打开 Maven 设置路径&#xff1a;在 IDEA 中&#xf…...

编程日记 2025/10/27 7:19:56

Axure中继器表格：实现复杂交互设计的利器

在产品原型设计领域&#xff0c;Axure凭借其强大的元件库和交互功能&#xff0c;成为设计师们手中的得力工具。其中&#xff0c;中继器元件在表格设计方面展现出了独特的优势&#xff0c;结合动态面板等元件&#xff0c;能够打造出功能丰富、交互体验良好的表格原型。本文将深入…...

编程日记 2025/10/25 12:15:44

VR 全景看车的独特优势​

全方位沉浸式体验​ VR 全景看车最显著的优势&#xff0c;就是为用户带来了全方位的沉浸式体验。通过 VR 技术&#xff0c;用户仿佛置身于真实的汽车展厅或试驾场景之中&#xff0c;能够 360 度无死角地观察车辆的外观、内饰、细节等各个方面 。无论是车辆的整体造型&#xff0…...

编程日记 2025/7/19 7:22:46

前端 JavaScript 处理流式响应的坑

给使用 JavaScript 的同学提个醒&#xff01; 浏览器端处理流式响应&#xff0c;想要完美体验 请使用 Fetch API。 Axios 无法使用stream来直接处理真正的流式响应&#xff08;但 Node.js 中可以使用 stream&#xff09;&#xff0c;这与浏览器底层 HTTP 请求实现的限制有关。 …...

编程日记 2025/10/25 8:49:36

AI Agent认知框架（ReAct、函数调用、计划与执行、自问自答、批判修正、思维链、思维树详解和对比，最后表格整理总结

以下是主流AI Agent认知框架的详细说明、对比及表格总结&#xff1a; 1. 各认知框架详解 (1) ReAct (Reasoning Action) 定义&#xff1a;结合推理&#xff08;Reasoning&#xff09;和行动&#xff08;Action&#xff09;的循环过程。核心机制&#xff1a; 模型先推理&…...

编程日记 2025/10/25 8:51:51

springBoot_自定义starter

Spring Boot 自定义 Starter 详解 一、Spring Boot Starter 基础概念 1.1 什么是 Spring Boot Starter Spring Boot Starter 是 Spring Boot 的一个核心概念&#xff0c;它是一种特殊的依赖描述符&#xff0c;包含了一组可以集成到应用中的依赖项。简单来说&#xff0c;Star…...

编程日记 2025/7/2 13:47:55

搭建TypeScript单元测试环境

我们在学习TypeScript的时候如果能够搭建一个单元测试的环境&#xff0c;那写些demo会很简单&#xff0c;下面我们使用jest来搭建一个单元测试环境 Jest 是一个由 Facebook 开发并开源的 JavaScript 测试框架&#xff0c;被广泛应用于前端和 Node.js 项目的单元测试。以下是关…...

编程日记 2025/10/25 17:24:08

第十一届机械工程、材料和自动化技术国际会议（MMEAT 2025）

重要信息 官网&#xff1a;www.mmeat.net 时间&#xff1a;2025年06月23-25日 地点&#xff1a;中国-深圳 部分展示 征稿主题 智能制造和工业自动化 复合材料与高性能材料先进制造技术 自动化机器人系统 云制造与物联网集成 精密制造技术 智能生产线优化 实时数据分析与过…...

编程日记 2025/10/25 12:19:41

leetcode 1143. Longest Common Subsequence

目录 题目描述 第一步&#xff0c;明确并理解dp数组及下标的含义 第二步&#xff0c;分析明确并理解递推公式 第三步&#xff0c;理解dp数组如何初始化 第四步&#xff0c;理解遍历顺序 代码 题目描述 这道题和第718题的区别就是&#xff0c;本题求的是最长公共子序列的长…...

编程日记 2025/10/27 17:16:40

SSH 私钥文件权限控制指南

1. 为什么必须严格控制私钥文件权限&#xff1f; 安全机制&#xff1a;SSH 协议强制要求私钥文件必须仅对所有者可读&#xff0c;防止未授权访问。 风险&#xff1a;若权限过松&#xff08;如其他用户可读&#xff09;&#xff0c;SSH 客户端会拒绝连接&#xff0c;避免私钥泄…...

编程日记 2025/9/22 2:54:28

stack和queue的学习

stack的介绍 stack的文档介绍 stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其删除只能从容器的一端进行元素的插入与提取操作。stack是作为容器适配器被实现的&#xff0c;容器适配器即是对特定类封装作为其底层的容器&#xff0c;…...

编程日记 2025/10/25 12:21:09

微服务Nacos组件的介绍、安装、使用

微服务Nacos组件的介绍、安装、使用 在微服务架构日渐普及的今天&#xff0c;服务注册与配置管理成了系统架构中的关键环节。阿里巴巴开源的 Nacos&#xff08;Naming and Configuration Service&#xff09;正是解决这一问题的利器。本文将为你全面介绍 Nacos 的概念、安装方…...

编程日记 2025/10/25 12:34:18

SpringBoot_为何需要SpringBoot?

Spring Boot 出现前的开发困境 配置繁琐 大量的 XML 配置文件 Spring 是一个非常优秀的轻量级框架&#xff0c;但其配置却是重量级的需要编写大量的 XML 配置文件或注解配置&#xff0c;使项目配置复杂且难以维护配置文件中容易出现错误&#xff0c;且排查问题困难开发过程中…...

编程日记 2025/10/25 8:34:44

格式工厂 v5.18最新免安装绿色便携版

前言 用它来转视频的时候&#xff0c;还能顺便给那些有点小瑕疵的视频修修补补&#xff0c;保证转出来的视频质量杠杠的。更厉害的是&#xff0c;它不只是转换那么简单&#xff0c;还能帮你把PDF合并成一本小册子&#xff0c;视频也能合并成大片&#xff0c;还能随心所欲地裁剪…...

编程日记 2025/10/25 16:32:24

使用logrotate实现日志轮转

logrotate 是一个强大的 Linux 工具&#xff0c;用于自动化管理日志文件的轮转、压缩、删除和归档。它能有效防止日志文件无限增长&#xff0c;节省磁盘空间&#xff0c;同时保持日志的可追溯性。以下是详细讲解 logrotate 的用法&#xff0c;涵盖安装、配置、测试、自动化、常…...

编程日记 2025/6/14 14:03:57