当 PC 端和移动端共用一个域名时,避免 CDN 缓存页面混乱(nginx)

news/2024/11/17 6:27:27/

  在当今的互联网时代,网站的访问体验对于用户来说至关重要。而在网站开发中,有时会出现 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 端和移动端是两套代码,就使用两个域名,以提高系统的稳定性和性能,为用户带来更好的访问体验。


http://www.ppmy.cn/news/1530790.html

相关文章

安卓13删除下拉栏中的关机按钮版本2 android13删除下拉栏关机按钮

总纲 android13 rom 开发总纲说明 文章目录 1.前言2.问题分析3.代码分析4.代码修改5.编译6.彩蛋1.前言 顶部导航栏下拉可以看到,底部这里有个设置按钮,点击可以进入设备的设置页面,这里我们将更改为删除,不同用户通过这个地方进入设置。我们之前写过一个文章也是一样的删除…

ECharts基础使用方法 ---vue

1.安装依赖文件 仔细看项目" README.md " 描述,确定用什么安装 npm npm install echarts --save //官网推荐使用 pnpm pnpm install echarts --save 其他也是 在项目根目录,打开当前目录命令控制栏,输入以上命令并运行 安装成功后…

MySQL的登录、访问、退出

一、登录: 访问MySQL服务器对应的命令:mysql.exe ,位置:C:\Program Files\MySQL\MySQL Server 8.0\bin (mysql.exe需要带参数执行,所以直接在图形界面下执行该命令会自动结束) 执行mysql.exe命令的时候出…

如何在 UniApp 中实现地图的视野自适应?

推荐学习文档 golang应用级os框架,欢迎stargolang应用级os框架使用案例,欢迎star案例:基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总想学习更多golang知识,这里有免费的golang学习笔…

基于springboot vue 大学生竞赛管理系统设计与实现

博主介绍:专注于Java vue .net php phython 小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设,从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟 我的博客空间发布了1000毕设题目 方便大家学习使用 感兴趣的…

【Unity基础】Unity中跨平台使用SQLite(一)

一、概述 游戏中数据存储方案众多,在进行选择时,除了要考虑数据类型外,还要考虑对于跨平台的支持。 对于数据存储方案将在单独文章里介绍,下面只是总结了不同方案的特点。 方法跨平台支持读写能力适合场景特点Resources优秀只读…

网站自动识别使用设备

现在有一个需求是&#xff0c;写了两组页面&#xff0c;进行渲染&#xff0c;一组是pc端&#xff0c;另外一组是移动端&#xff0c;要自动匹配当前设备进行渲染 解决方案 1.通过 navigator.userAgent来判断当前的设备 例子 <script>document.write("用户代理: &…

专题七_分治_快排_归并_算法专题详细总结

目录 分治 一、分治思想的概念 二、分治思想的步骤 1. 颜⾊分类&#xff08;medium&#xff09; 解析&#xff1a; 2. 快速排序&#xff08;medium&#xff09; 解析&#xff1a; 总结&#xff1a; 3. 快速选择算法&#xff08;medium&#xff09; 解析&#xff1a; …