解决个人网站百度统计失效的完美方案

前端

2023-09-15 20:13:09

引子：个人网站百度统计失效的困扰

作为一名技术博主，我经常在自己的个人网站上发布文章和教程。为了跟踪网站流量和用户行为，我使用了百度统计。但最近，我发现百度统计失效了，网站流量数据无法正常显示。这让我感到非常困扰，因为我无法准确了解网站的访问情况。

一、失效原因探究：第三方统计、微信图片的跨域难题

经过一番排查，我发现百度统计失效的原因在于我的文章图片有来自第三方微信后台上传的文章。由于微信的图片存储在第三方服务器上，当网站访问者访问我的文章时，就会产生跨域请求。跨域请求会导致百度统计无法正常记录网站流量数据，从而导致百度统计失效。

二、完美解决方案：图床、CDN助力跨域难题迎刃而解

为了解决百度统计失效的问题，我决定使用图床和CDN来解决跨域难题。图床可以将我的文章图片存储在自己的服务器上，从而避免跨域请求。CDN可以将我的网站内容缓存到全球各地的服务器上，从而提高网站的访问速度和稳定性。

1. 图床的选择：七牛云对象存储、又拍云存储、阿里云OSS

在选择图床时，我比较了七牛云对象存储、又拍云存储和阿里云OSS这三个主流的图床服务。最终，我选择了七牛云对象存储，因为它具有以下优点：

存储空间大：七牛云对象存储提供了无限的存储空间，可以满足我大量的图片存储需求。
价格实惠：七牛云对象存储的价格非常实惠，每月只需几元钱就可以获得大量的存储空间。
易于使用：七牛云对象存储提供了简单的API和控制台，可以轻松地上传和管理图片。

2. CDN的选择：Cloudflare、阿里云CDN、腾讯云CDN

在选择CDN时，我比较了Cloudflare、阿里云CDN和腾讯云CDN这三个主流的CDN服务。最终，我选择了Cloudflare，因为它具有以下优点：

全球网络覆盖：Cloudflare在全球拥有广泛的网络覆盖，可以将我的网站内容缓存到全球各地的服务器上。
性能卓越：Cloudflare的性能非常卓越，可以显著提高网站的访问速度和稳定性。
安全可靠：Cloudflare提供了强大的安全防护措施，可以保护我的网站免受各种安全威胁。

三、实施方案：图床、CDN联手，百度统计重焕生机

1. 将文章图片上传至图床

使用七牛云对象存储提供的API或控制台，将我的文章图片上传至图床。在上传图片时，我使用了七牛云对象存储提供的图片处理功能，对图片进行了压缩和格式转换，以减少图片的大小和提高图片的加载速度。

# 使用七牛云对象存储API上传图片
curl -X PUT "http://your-bucket.qiniu.com/your-image.jpg" -F "file=@path/to/your/image.jpg"

2. 配置CDN，加速网站访问

使用Cloudflare提供的控制台，将我的网站添加到Cloudflare的网络中。在添加网站时，我选择了Cloudflare提供的“自动优化”功能，以启用Cloudflare的各种优化功能，包括页面缓存、GZIP压缩和HTTP/2支持。

# 使用Cloudflare API添加网站
curl -X POST "https://api.cloudflare.com/client/v4/zones/{zone_id}/dns_records" \
     -H "Authorization: Bearer {your_api_key}" \
     -d '{
           "type": "A",
           "name": "{your-domain}.com",
           "content": "{your-server-ip}",
           "ttl": 120,
           "proxied": false
         }'

3. 修改网站代码，使用图床图片链接

在将文章图片上传至图床并配置好CDN之后，我修改了网站代码，将原本指向微信图片服务器的图片链接替换为指向图床图片链接。这样，当网站访问者访问我的文章时，图片就会从图床服务器加载，从而避免跨域请求。

<!-- 替换前 -->
<img src="https://res.wx.qq.com/hunyuan_open/default/xxx.jpg" alt="文章图片">

<!-- 替换后 -->
<img src="https://your-server.com/path/to/your/image.jpg" alt="文章图片">