背景需求
双十一即将来临,这意味着我购买了三年低配的阿里服务器,而它的服务期限也即将到期。为了提前做好准备,我在一周前对静态网站进行了备份,并成功地使用了Vercel进行部署(已经有了域名)。相比于付费的阿里云服务器,Vercel的速度要快得多。然而,由于其中一个网站的接口在https下无法正常调用,我不得不临时回到阿里云服务器过渡一段时间。
让事情更糟的是,我此刻正忙于其他事务,以至于忘记关注服务器到期的问题,直到今天(11月12日)早上孩子突然提醒我要打卡,我才突然意识到问题的严重性。
为了培养孩子早起不拖延的习惯,我为他做了一个打卡器。每天在固定时间前完成打卡可以获得相应的分数奖励,累积起来可以用来购买一些小玩具。通常在周末,他有睡懒觉的习惯,但今天却早早地起来要打卡,结果我发现项目无法访问了。虽然迁移服务器是容易的,但由于这是一个纯前端项目,打卡数据存储在localstorage中。而在切换到Vercel后,协议从http变为了https,导致本地存储无法访问。他的打卡历史记录看不到了!
解决方案
各种搜索和ChatGPT提问,都没有告诉我怎么访问一个打不开的网站的本地存储。
后来仔细想想,访问本地存储的前提协议、域名和端口三个只要不变就能访问到。于是就有
- 修改host文件,添加本地调试IP地址映射到目标域名:
192.168.2.212 e-art.top
- 本地前端项目设置启动端口号为80(和原项目保持一致),比如我用vite的设置如下
server: {
port: 80,
host: '0.0.0.0' // 允许局域网访问调试
}
- 启动本地项目,然后从地址栏访问
e-art.top
- 此时打开控制台,在 “应用程序-存储-localstora-http://e-art.top” 就可以看到需要的数据了
注意事项
- 曾把域名从vercel切换回来后,浏览器自动会把原地转换成https,这样导致无法访问。查得如下方法:
1.地址栏中输入chrome://net-internals/#hsts。
2.在Delete domain中输入项目的域名,并Delete(删除)。
3.可以在Query domain测试是否删除成功。
操作后依然不好用,最终直到尝试清理浏览器缓存后才恢复正常。
- Github + Vercel 部署静态网站是免费的,却比国内收费服务器最低配快多了,但注意解析到vercel要用备用IP:76.223.126.88