一个前端在调试本地页面时，总会有些稀奇古怪的需求，比如产品立刻要看你的页面效果，而此时有没有上线环境折腾给他看，那此时通过内网穿透的方式，实时把你的项目生成一个在线链接丢给他，让他去找那一像素的bug！

什么是内网穿透

我的理解是：将您的本地主机公开到世界各地，便于测试和共享，无需混淆DNS或部署只是为了让其他人测试您的更改。

localtunnel

通过localtunnel就能把你的本地地址映射到一个公共地址，让其他用户也能访问，比如我本地地址localhost:8888,通过localtunnel生成一个指定前缀的https://huqi.localtunnel.me地址，让测试人员无需通过局域网等就能访问。

安装及使用

默认你安装了node的环境

 
    npm install -g localtunnel

    lt --subdomain <个性前缀> --port <要映射的端口>

比如我本地开启了一个8888的服务

接着我就开启localtunnel

浏览器输入地址即可访问

遇到的坑

显示无效的主机：Invalid Host header，
经查是因为wepack配置的问题

  • 问题
  • 解决：webpack配置文件devServer添加：disableHostCheck: true

其他有趣的现象

当已经有了一个自定义的域名，另外一个人又开启一个同样的域名会怎样？
很大几率会出现如下情况(当然不是防火墙的问题)：

  • Error: connection refused: localtunnel.me:38571 (check your firewall settings)

前端内网穿透，localtunnel你值得拥有！的更多相关文章

  1. 内网穿透神器（ngrok）服务端部署【分享一台自己的ngrok服务器】【多平台】

    Ngrok为何物 “ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道.ngrok 可捕获和分析所有通道上的流量,便于后期分析和重放.”这是百度百科上给Ng ...

  2. SSH 端口转发+内网穿透

    用最直白的语言对本文所有内容进行定义: 端口转发(-L):用A机器(内网)登录B机器(公网), 在A机器打开端口,将收到的所有请求转发到B机器的某个端口 (在代理机上执行) 内网穿透(-R):用A机器 ...

  3. Ngrok 内网穿透利器

    Ngrok是什么 Ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道.Ngrok 可捕获和分析所有通道上的流量,便于后期分析和重放 为什么要使用Ngrok ...

  4. Ngrok 内网穿透神器(转载)

    mac上配置web服务: http://note.rpsh.net/posts/2013/11/27/osx-10-9-apache-server-php-mysql/ Ngrok 内网穿透神器 由于 ...

  5. SSH的内网穿透

    SSH的内网穿透 1.内网:     ssh -N -f -R 2222:127.0.0.1:22 lienzh@我的PC的IP2.外网:     ssh -p 2222 root@localhost ...

  6. ngrok内网穿透（微信调试：只试用于微信测试账号）

    一.简介 ngrok:https://ngrok.com 功能:就是把外网地址映射到本地的内网地址 缺点: 1.免费版生成的域名是随机的(由于我是用于调试,就没什么关系,如果是正式生产环境可能需要一个 ...

  7. 内网穿透&UDP打洞

    这两天找度度重新回忆了一下关于内网穿透的事情,在百度文库上找到了两三篇写的比较通俗易懂的文章,把内网穿透做个简单总结. 首先文章建议 Cone NAPT 还有希望,要是 Symmetri NAPT 就 ...

  8. ngrok内网穿透神器

    ngrok类似国内的花生壳,可以将本地的内网映射到公网上,这样就可以做web开发,微信开发了.下面就介绍下ngrok是怎么配置的吧. 方式一: 一.打开ngrok的官网https://ngrok.co ...

  9. 内网穿透+VS2015自带IIS express实现本地调试（微信等需要将开发环境暴漏到外网的情况使用）

    今天一个兼职结束了,又要开始寻找新的兼职公司了 ,为了贴补家用啊,为了给儿子更好的生活加油! 抒情完毕进入正题,本篇文章要解决的问题是其实在开发微信支付,微信公众号等回调地址必须是外网可访问的80端口 ...

随机推荐

  1. Math.Round和四舍五入

    Math.Round方法并不是像想象中的四舍五入, 可以从下面的输出结果看出来: Math.Round(3.44, 1); //Returns 3.4. Math.Round(3.45, 1); // ...

  2. vue父组件向子组件传对象，不实时更新解决

    vue报错:void mutating a prop directly since the value will be overwritten whenever the parent componen ...

  3. python的unittest框架中的assert断言

    unittest框架自带断言,如果想用assert断言,一定要引入unittest.TestCase框架才行,不然不会自动识别assert断言

  4. 学习vue第七节，filter过滤器如何的使用

    vue 过滤器如何的使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  5. java反编译软件

    1.Java反编译插件 —— Jadclipse JadClipse是Jad的Eclipse插件,是一款非常实用而且方便地Java反编译插件,我们只需将下载的插件包复制到eclipse的plugins ...

  6. 聚合类型与POD类型

    Lippman在<深度探索C++对象模型>的前言中写道: I have heard a number of people over the years voice opinions sim ...

  7. Spring Cloud学习 之 Spring Cloud Ribbon（负载均衡策略）

    文章目录 AbstractLoadBalancerRule: RandomRule: RoundRobinRule: RetryRule: WeightedResponseTimeRule: 定时任务 ...

  8. 【Hadoop离线基础总结】MapReduce 社交粉丝数据分析 求出哪些人两两之间有共同好友，及他俩的共同好友都有谁？

    MapReduce 社交粉丝数据分析 求出哪些人两两之间有共同好友,及他俩的共同好友都有谁? 用户及好友数据 A:B,C,D,F,E,O B:A,C,E,K C:F,A,D,I D:A,E,F,L E ...

  9. Linux内核驱动学习（九）GPIO外部输入的处理

    文章目录 前言 设备树 两个结构体 gpio_platform_data gpio_demo_device 两种方式 轮询 外部中断 总结 附录 前言 前面是如何操作GPIO进行输出,这里我重新实现了 ...

  10. Mybatis-入门演示

    MyBatis:持久层框架 前言 之前有看过和学习一些mybatis的文章和内容,但是没有去写过文章记录下,现在借鉴b站的狂神视频和官方文档看来重新撸一遍入门.有错误请多指教. 内容 数据访问层-相当 ...