news 2026/8/7 21:41:20

【怎么在手机上访问部署在电脑上的网页,不在一个局域网】

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
【怎么在手机上访问部署在电脑上的网页,不在一个局域网】

其实可以使用cloudefare提供的那个,支持使用自己的域名

百度回答

方法一:使用内网穿透工具(推荐)

通过工具如贝锐蒲公英或Ngrok,将本地服务映射到公网,手机直接访问生成的公网地址即可。无需公网IP,支持跨运营商访问。

方法二:远程桌面工具

在电脑端设置远程桌面(如Windows远程桌面),手机端安装对应客户端,通过输入电脑的公网IP和凭证连接。需注意网络稳定性和流量消耗。

方法三:VPN组网

在电脑端搭建VPN服务器(如OpenVPN),手机连接后形成虚拟局域网,即可访问电脑本地服务。适合技术基础较强的用户。

注意‌:公网访问需确保电脑防火墙放行对应端口,并注意网络安全风险。

ngrok config add-authtoken $YOUR_AUTHTOKEN

ngrok http 5000


python 代码

# app.pyfromflaskimportFlask,render_template_string,Responsefromdatetimeimportdatetimeimporttimeimportthreading app=Flask(__name__)# 首页HTML=""" <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>实时时间 + 计算器</title> <style> body{font-family:Arial,Helvetica,sans-serif;text-align:center;margin-top:40px;background:#f7f7f7;} #clock{font-size:48px;margin-bottom:30px;} .calc{border-collapse:collapse;margin:0 auto 20px;} .calc td{padding:0;} .calc button{width:70px;height:60px;font-size:22px;border:1px solid #bbb;background:#fff;cursor:pointer;} .calc button:active{background:#ddd;} #display{width:100%;height:60px;font-size:28px;text-align:right;padding:0 10px;box-sizing:border-box;} </style> </head> <body> <div id="clock">--:--:--</div> <table class="calc"> <tr> <td colspan="4"><input id="display" disabled></td> </tr> <tr> <td><button onclick="press('7')">7</button></td> <td><button onclick="press('8')">8</button></td> <td><button onclick="press('9')">9</button></td> <td><button onclick="press('/')">÷</button></td> </tr> <tr> <td><button onclick="press('4')">4</button></td> <td><button onclick="press('5')">5</button></td> <td><button onclick="press('6')">6</button></td> <td><button onclick="press('*')">×</button></td> </tr> <tr> <td><button onclick="press('1')">1</button></td> <td><button onclick="press('2')">2</button></td> <td><button onclick="press('3')">3</button></td> <td><button onclick="press('-')">−</button></td> </tr> <tr> <td><button onclick="press('0')">0</button></td> <td><button onclick="press('.')">.</button></td> <td><button onclick="press('=')">=</button></td> <td><button onclick="press('+')">+</button></td> </tr> <tr> <td colspan="2"><button onclick="clr()">C</button></td> <td colspan="2"><button onclick="del()">⌫</button></td> </tr> </table> <script> // 实时时间 SSE const clock = document.getElementById('clock'); const evtSource = new EventSource('/time'); evtSource.onmessage = e => clock.textContent = e.data; // 计算器 let expr = ''; function press(k){ if(k === '='){ try{ expr = String(eval(expr)); } catch(e){ expr = 'Error'; } }else{ expr += k; } document.getElementById('display').value = expr; } function clr(){ expr = ''; document.getElementById('display').value = ''; } function del(){ expr = expr.slice(0,-1); document.getElementById('display').value = expr; } </script> </body> </html> """@app.route('/')defindex():returnrender_template_string(HTML)# Server-Sent Events:每秒推送一次当前时间deftime_gen():whileTrue:yieldf"data:{datetime.now().strftime('%H:%M:%S')}\n\n"time.sleep(1)@app.route('/time')deftime_stream():returnResponse(time_gen(),mimetype="text/event-stream")if__name__=='__main__':# threaded=True 保证 SSE 不阻塞app.run(host='0.0.0.0',port=5000,threaded=True)

还有
Cloudflare Tunnel(原 Argo Tunnel)——
要“下载一个官方软件”cloudflared,然后在本地跑一条加密隧道到 Cloudflare 边缘节点,
不需要公网 IP、不需要 ngrok、不需要开端口
再把自定义域名解析到这条隧道,任何设备都能访问。下面是最新的完整步骤(2024-2025 版)。


一、准备工作

  1. 一个已托管到 Cloudflare 的域名(NS 指向 CF 即可,免费版也行)。
  2. 本地电脑(Windows / macOS / Linux / 树莓派均可)能跑你的 Web 服务。
  3. 有管理员权限安装cloudflared

二、安装 cloudflared

Windows(PowerShell 管理员)

# 1. 下载Invoke-WebRequest-Uri"https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-windows-amd64.exe"-OutFile"C:\Windows\System32\cloudflared.exe"# 2. 验证cloudflared--version

macOS

brewinstallcloudflared

Linux(Debian/Ubuntu)

wget-q https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.debsudodpkg -i cloudflared-linux-amd64.deb

三、一键登录 & 创建隧道

  1. 登录(浏览器会弹出授权)

    cloudflared tunnel login

    成功后会在~/.cloudflared/生成cert.pem

  2. 创建隧道(名字随便取,这里叫my-demo

    cloudflared tunnel create my-demo

    控制台会返回一行Tunnel IDxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
    同时本地会生成xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.json凭证文件,别丢


四、把域名绑到隧道(CNAME 方式)

假设你想用demo.example.com访问本地 5000 端口:

  1. 添加 DNS 记录
    cloudflared tunnel route dns my-demo demo
    这条命令会自动在 Cloudflare 控制台插入一条 CNAME:
    demo.example.com<Tunnel-ID>.cfargotunnel.com
    代理状态默认 ☁️橙色(开启),无需手动再点。

五、写配置文件(一次写好,以后直接cloudflared tunnel run

新建文件~/.cloudflared/config.yml(Windows 路径相同):

tunnel:<Tunnel-ID># 上一步生成的 IDcredentials-file:/home/你的用户名/.cloudflared/<Tunnel-ID>.jsoningress:-hostname:demo.example.comservice:http://localhost:5000-service:http_status:404# 默认兜底

六、启动隧道

cloudflared tunnel run my-demo

看到Connected ...即表示本地 5000 端口已通过加密隧道到达 Cloudflare 边缘节点。


七、手机/外网测试

  1. 电脑保持cloudflared运行。
  2. 手机断开 Wi-Fi(用 4G/5G)打开浏览器输入
    https://demo.example.com
    首次访问会慢 1-2 秒,之后全球任何网络都能打开,地址栏直接有小锁(Cloudflare 边缘证书自动签发)。

八、常用补充

  • 换端口/换域名:改config.yml后重启隧道即可。
  • 后台运行:
    Linux 用 systemd:sudo cloudflared service install
    Windows 用 NSSM 或任务计划程序。
  • 同时暴露多个服务:在ingress里继续加- hostname: xxx即可。
  • 卸载:
    cloudflared tunnel delete my-demo
    再到 Cloudflare 控制台把对应 DNS 记录删掉即可。

cloudflaredcloudflared tunnel createcloudflared tunnel route dns→ 写config.ymlcloudflared tunnel run→ 手机用你自己的域名随时随地访问本地网页,无需公网 IP、无需 ngrok、免费 SSL+CDN

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/8/5 3:36:48

2025 年网络安全学习路线:从零基础到实战大神,避开 90% 的坑(非常详细,附工具包以及学习资源包)

2025 年网络安全学习路线&#xff1a;从零基础到实战大神&#xff0c;避开 90% 的坑 2025 年&#xff0c;数字化浪潮下的网络世界暗流涌动。数据泄露、勒索软件、供应链攻击如同悬在头顶的利剑&#xff0c;让企业和个人都绷紧了神经。 与此同时&#xff0c;网络安全人才市场却…

作者头像 李华
网站建设 2026/8/7 23:02:39

Reachability隐私合规完全指南:iOS 17+一键配置解决方案

Reachability隐私合规完全指南&#xff1a;iOS 17一键配置解决方案 【免费下载链接】Reachability ARC and GCD Compatible Reachability Class for iOS and MacOS. Drop in replacement for Apple Reachability 项目地址: https://gitcode.com/gh_mirrors/re/Reachability …

作者头像 李华
网站建设 2026/8/7 15:34:21

初等数论终极指南:密码学必备的5个核心数学原理

初等数论终极指南&#xff1a;密码学必备的5个核心数学原理 【免费下载链接】初等数论陈景润密码学要用到 pdf版本&#xff09; 项目地址: https://gitcode.com/open-source-toolkit/b1390 在当今信息安全至关重要的时代&#xff0c;初等数论作为密码学的数学基石&#…

作者头像 李华
网站建设 2026/8/7 23:05:28

中文论文格式模板使用指南

中文论文格式模板使用指南 【免费下载链接】中文论文格式模板下载分享 中文论文格式模板下载 项目地址: https://gitcode.com/Open-source-documentation-tutorial/90604 学术论文写作中&#xff0c;规范的格式要求往往让许多研究者感到困扰。为了简化这一过程&#xff…

作者头像 李华
网站建设 2026/8/7 11:37:44

视觉AI提示词设计:从困惑到精通的实战指南

视觉AI提示词设计&#xff1a;从困惑到精通的实战指南 【免费下载链接】awesome-prompts 项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-prompts 你是否曾经面对AI视觉模型感到束手无策&#xff1f;明明图像清晰可见&#xff0c;模型却给出令人啼笑皆非的…

作者头像 李华
网站建设 2026/8/6 20:35:21

wangEditor导入微信公众号内容自动排版CMS

企业网站Word粘贴及导入功能开发方案 背景与需求分析 作为广东某软件公司的前端工程师&#xff0c;我负责在企业网站后台管理系统中实现Word粘贴和文档导入功能。客户主要诉求如下&#xff1a; Word粘贴功能&#xff1a;直接从Word复制内容粘贴到网站编辑器&#xff0c;保留…

作者头像 李华