Ngrok 内网穿透实现Django+Vue部署
目录
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'],},