今天在解决跨域问的时候,误打误撞解决了一个原来困扰我的问题。
很多时候会有这样的问题,想要把本地的页面发送给别人看,不可能一个demo页面都去部署到线上去,那该怎么办?
如果是内网问题还好解决,如果用的是webstorm的话,webstorm本身就可以自己在本地起一个服务。在webstorm的偏好设置里面,有一个debugger
选项,只要把Built-in server
这个选项勾选,webstorm会自己启动一个服务,只要把网址的localhost
改成自己机器的ip地址,只要机器是在同一个网内,就可以访问到本地的页面了。
还有一种方式是,利用node在本地起一个服务,方法是安装一个npm包http-server
,运行npm install http-server -g
,安装完成之后直接输入命令$ http-server
,他就会在本地的8080端口去起一个服务,本地所有的文件就都可以访问到了,只要在起的服务的地址后面再加上文件的路径就可以了。
如果是外网呢?我在知乎上看到了一个答案,(这里)。
具体做法是这样的,我们需要一个工具ngrok
,但是好像这个已经被墙了,国内有很多替代的工具,可以自行搜索一下,这里我找到两个:
具体的使用方法也很简单,以natapp来举例。只要下载相应操作系统的客户端,然后把它解压,cd进入到解压后的目录中,运行命令./ngrok -config ngrok.cfg -subdomain myapp 80
。
这里需要注意myapp
这个是你要自己定义的域名,80是你要映射到本地的端口,然后访问http://myapp.ngrok.natapp.cn
就可以和本地联通了。
现在其实只要配合node在本地起的服务就可以完成外网访问本地页面了,使用http-server
起一个本地的服务是8080端口,所以我只需要把ngrok
映射到8080端口就可以了,即运行指令./ngrok -config ngrok.cfg -subdomain myapp 8080
,这样再访问自定义的域名之后,就可以顺利访问到本地了。
最后,很多选项都可以在ngrok.cfg
这个文件里修改,并且ngrok
的用途不仅仅简单地是这一个,他还有很多用途,有兴趣的具体可以去网上了解一下,因为我对ngrok
的了解也不是很多。
在解决这个问题之后,我本地的页面已经可以跑在微信里了,再配合我原来记录的手机调试本地页面的跨域问题,就可以解决接口跨域的问题了,不过这个解决办法挺笨的,更好的解决办法我还在找,但是还没有找到。
最好还是和后台沟通可以把测试服务器的接口改成所有域名都能够访问,这样还是最方便的。
以上。