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

发布于:2025-04-17 ⋅ 阅读:(86) ⋅ 点赞:(0)

目录

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'],
    },


网站公告

今日签到

点亮在社区的每一天
去签到