当 PC 端和移动端共用一个域名时，避免 CDN 缓存页面混乱（nginx）

在当今的互联网时代，网站的访问体验对于用户来说至关重要。而在网站开发中，有时会出现 PC 端和移动端使用两套不同代码却共用一个域名的情况，这就可能导致一系列问题，其中之一就是 CDN 为 PC 端缓存移动端页面。

先来看看为什么会出现这种问题。当 PC 端和移动端共用一个域名时，CDN 在缓存页面时可能无法准确区分不同设备的请求。比如，一个用户在 PC 端首次访问了某个页面，CDN 会将这个页面缓存下来。但当另一个用户使用移动端设备访问相同页面时，CDN 可能会错误地将为 PC 端缓存的页面返回给移动端用户，从而导致页面显示不正常。

举个例子，某电商平台在发展初期为了节省成本和方便管理，让 PC 端和移动端共用一个域名。结果一些用户在 PC 端访问时，有时会出现页面布局混乱、图片加载不完整等问题，经过排查发现是 CDN 错误地缓存了移动端页面。同样，移动端用户也可能会收到不适合其设备的 PC 端页面，影响用户体验。

那么，如何解决这个问题呢？通常可以使用 Vary 响应头来控制 CDN 对不同请求头的缓存。具体来说，可以使用Vary: User-Agent，这意味着如果 User-Agent 不一样，则重新发起请求，而非从缓存中读取页面。

以下是一个使用Vary: User-Agent的代码示例：

nginx 复制代码

server {
    listen 80;
    server_name example.com;

    location / {
        add_header Vary User-Agent;
        if ($http_user_agent ~* "(Android|webOS|iPhone|iPad|BlackBerry)") {
            # 移动端逻辑
            root /usr/local/website/mobile;
        } else {
            # PC 端逻辑
            root /usr/local/website/web;
        }
        index index.html index.htm;
    }
}

然而，这种方法也有一定的弊端。因为 User-Agent 实在过多，不同版本的手机操作系统、不同的浏览器都会有不同的 User-Agent，这就导致缓存失效过多，降低了缓存的效率。

其实，更好的解决办法是如果 PC 端和移动端是两套代码，就使用两个域名。这样可以避免 Nginx 判断是否移动端容易出错的问题。在 Nginx 配置中，通过判断 UA 来确定是否为移动端访问，这种方式并不是完全可靠的。不同的设备和浏览器可能会有不同的 UA 表现，而且 UA 可以被伪造或修改，这就增加了判断的难度和出错的可能性。比如，某新闻网站在进行 UA 判断时，出现了部分平板电脑被错误地识别为 PC 端，导致用户体验不佳。

同时，使用两个域名也对缓存更加友好。由于不用再根据众多的 User-Agent 来判断是否缓存，减少了缓存失效的情况，提高了缓存的命中率，从而提升用户的访问速度和体验。

综上所述，为了避免 CDN 为 PC 端缓存移动端页面，我们可以使用Vary: User-Agent进行缓存控制，但更好的方式是如果 PC 端和移动端是两套代码，就使用两个域名，以提高系统的稳定性和性能，为用户带来更好的访问体验。