最近回国期间，我顺便测试了一下自己的个人网站，结果发现了一些有意思的问题。网站在境外访问一切正常，但我在国内访问时，出现了部分图标无法显示，交互式地图也无法正常加载等一系列的问题。打开浏览器的开发者工具后，发现大量 ERR_CONNECTION_TIMED_OUT 错误，即多个外部服务无法加载。我才意识到，这几年我这网站的很多代码更新都是在AI辅助下完成的，而我想要实现的一些功能都需要调用各种JS/CSS资源包。但AI写前端有个习惯，就是它喜欢直接调用CDN中的资源，而且根据我跟它的聊天历史，它默认我在芬兰，于是它代码中所调用的资源都在境外CDN节点上。于是这里就出现问题了：很多境外节点由于种种原因，被国内的GFW给屏蔽了。这也是为啥我在国内访问时会出现一堆time out。

第三方 CDN 的跨境访问问题

我的网站前端调用了Bootstrap Icons、Leaflet 等开源库，为了方便维护，之前直接通过公共 CDN 加载相关 CSS 和 JavaScript 文件。例如，Bootstrap Icons 使用的是：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

然而，cdn.jsdelivr.net 在国内部分网络环境下无法正常访问，导致相应图标加载失败。类似的问题也出现在通过 unpkg.com 加载的 Leaflet 资源上。

此时，一种解决思路是换成国内能用的CDN 镜像。但这又带来了新的问题：国内访问速度较快的 CDN，未必能为海外用户提供同样良好的访问体验。此外，免费公共 CDN 的可用性也可能随时间变化。考虑到这些因素，我最终倾向于采用静态资源自托管。将所需的 CSS、JS、字体和图片等文件下载到 Django 项目的 static 目录，再通过 {% static %} 引用。例如：

{% load static %}
<link rel="stylesheet" href="{% static 'leaflet/leaflet.css' %}">
<script src="{% static 'leaflet/leaflet.js' %}"></script>

这样可以减少网站对第三方 CDN 的依赖，也方便统一管理资源版本。当然，实际访问速度仍然取决于网站服务器的位置和网络连接质量。

另一个比较典型的问题出现在网站的交互式地图上。即使将 Leaflet 的 CSS 和 JavaScript 文件改为本地托管，地图仍然无法正常显示。进一步检查发现，问题出在 OpenStreetMap 的地图瓦片服务。Leaflet 负责地图的交互与渲染，而实际看到的道路、建筑和地理信息，需要从外部瓦片服务器获取。例如：

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

如果瓦片服务器无法连接，Leaflet 本身即使正常运行，地图底图依然无法显示。这里我尝试了几个国外的工具后，最终还是选择了国内的高德地图。虽然海外访问会慢一些，但考虑到我博客都是中文，用户也是国内占多数，因此还是高德更稳定一些。

以上是这次回国期间发现并处理的几个网站访问问题，目前相关资源已经进行了调整。如果大家在访问网站时还遇到其他 Bug，欢迎在这篇博文的评论区留言反馈，我会根据反馈继续排查和优化。