使用Ngrok将连接本地MySQL的React应用暴露至公网的问题咨询

你当前仅为前端静态页面开通了Ngrok隧道，React代码中配置的后端接口地址仍指向本地localhost:8000。当其他设备访问公网页面时，接口请求会发送到访问者自身设备的8000端口，根本没有触达你本地运行的Django服务，自然无法加载数据库相关数据。
不需要为MySQL的3306端口开通单独隧道：前端架构设计上就不应该直连数据库，所有数据读写都应该通过Django后端中转，公网暴露3306端口会带来严重的数据库安全风险。

• 第一步：为Django服务开通Ngrok隧道
  在本地终端执行命令 ngrok http 8000，启动成功后Ngrok会生成一个对应8000端口的公网地址，格式类似https://abc123.ngrok.io，这个就是Django服务的公网访问入口。
• 第二步：修改Django配置适配公网请求
  打开Django项目的settings.py文件做两处修改：
  1. 在ALLOWED_HOSTS列表中添加Ngrok域名，临时测试可直接写为 ALLOWED_HOSTS = ['localhost', '127.0.0.1', '.ngrok.io']，允许所有Ngrok子域名的请求打到Django服务
  2. 配置跨域规则：安装django-cors-headers依赖，按照官方文档将其加入已安装应用和中间件列表，临时测试可直接设置CORS_ALLOW_ALL_ORIGINS = True，避免前端请求被跨域策略拦截（该配置仅适合本地测试，生产环境请勿开启）
• 第三步：修改React侧接口配置
  把React代码中所有接口请求的基地址，从原来的http://localhost:8000替换为第一步拿到的Django对应的Ngrok公网地址。注意必须使用Ngrok提供的HTTPS协议地址，避免浏览器混合内容拦截报错。
• 第四步：为前端服务开通Ngrok隧道（按需）
  如果你是在开发模式下运行React（默认端口3000），再新开一个终端执行ngrok http 3000，拿到前端页面对应的公网地址。其他设备访问这个前端地址时，所有接口请求就会通过Ngrok隧道转发到你本地的Django服务，Django再读写本地MySQL数据返回给前端，功能就和本地运行完全一致。
  如果你已经把React项目打包为静态文件交由Django托管，这一步可以省略，直接访问Django对应的Ngrok公网地址即可同时访问页面和接口。

• Ngrok免费版本每次重启隧道都会重新生成随机域名，每次重启后需要同步更新React中的接口基地址、Django的允许域名配置。
• 测试过程中如果遇到请求报错，可以直接打开浏览器开发者工具的网络面板，查看请求的实际发送地址和报错信息，绝大多数问题都是地址配置错误、跨域未配置、ALLOWED_HOSTS未加白名单导致的。

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