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

目录

[Ngrok 配置](#Ngrok 配置)

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

直接cmd运行

[使用随机生成网址：ngrok http 端口号](#使用随机生成网址：ngrok http 端口号)

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

[Django 配置](#Django 配置)

[1.You're accessing the development server over HTTPS, but it only supports HTTP](#1.You're accessing the development server over HTTPS, but it only supports HTTP)

问题1解决方法

[Vue 配置](#Vue 配置)

[1.This request has been blocked; the content must be served over HTTPS](#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

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