一道腾讯的面试题：如何避免 CDN 为 PC 端缓存移动端页面

❝

本文收录于 GitHub 日问: DailyQuestion，内含大厂内推机会、面经大全及若干面试题，每天学习五分钟，一年进入大厂中。

• 大厂面经大全
• 大厂内推

❞

如果 PC 端和移动端是一套代码则不会出现这个问题。「这个问题出现在 PC 端和移动端是两套代码，却共用一个域名。」

使用 nginx 配置如下，根据 UA 判断是否移动端，而走不同的逻辑 (判断UA是否移动端容易出问题)

location / {
    // 默认 PC 端
    root /usr/local/website/web;

    # 判断 UA，访问移动端
    if ( $http_user_agent ~* "(Android|webOS|iPhone|iPad|BlackBerry)" ){
        root /usr/local/website/mobile;
    }

    index index.html index.htm;
}
复制代码

解决方案通常使用 Vary 响应头，来控制 CDN 对不同请求头的缓存。

「此处可以使用 Vary: User-Agent ，代表如果 User-Agent 不一样，则重新发起请求，而非从缓存中读取页面」

Vary: User-Agent
复制代码

当然，User-Agent 实在过多，此时缓存失效就会过多。

简答

使用 Vary: User-Agent，根据 UA 进行缓存。

Vary: User-Agent
复制代码

但最好不要出现这种情况，PC 端和移动端如果是两套代码，建议用两个域名，理由如下

1. nginx 判断是否移动端容易出错
2. 对缓存不友好

更多面试

• 【字节-视频架构组-前端】头条架构组招人了内含自测题
• 【美团】什么是防抖和节流，他们的应用场景有哪些
• 【美团】如何获取一个进程的内存并监控

关注我

❝

本文收录于 GitHub 日问: DailyQuestion，内含大厂内推机会、面经大全及若干面试题，每天学习五分钟，一年进入大厂中。

• 大厂面经大全
• 大厂内推

❞

我是山月，正致力于「每天用五分钟能够看完的简短答案回答一个大厂高频面试题」。可扫码关注，或者公众号中回复微信与我交流。

本文使用 mdnice 排版